Softonic

CSSテキストシャドウジェネレーター

ステップ 1 / 2
CSS を生成

DevToolsでtext-shadowの宣言を手作業で作成することは可能ですが、ソフトなニューモーフィックな輝きやレトロ風の2層ドロップシャドウ、あるいはヒーローのヘッダーに明瞭な1pxの輪郭が必要になると、その作業は推測に頼るものになります。このジェネレータを使えば、Xオフセット、Yオフセット、ぼかし半径およびRGBA色を調整し、貼り付け可能なCSSコード行をコピーすることができます。

テキストの影を設定する方法

  1. 1

    オフセットを設定します

    Xはピクセル単位の水平オフセット、Yは垂直方向のオフセットです。正のY値では影を下に押し下げ、負のY値では上に押し上げます。

  2. 2

    ぼかし半径を選択します

    ぼかし0では硬いシルエットになり、値を大きくするほど影が薄れていきます。一般的なソフトドロップでは4〜12pxのぼかしを使います。

  3. 3

    色を選択してください

    不透明度を調整するにはRGBA文字列を使用してください。`rgba(0,0,0,0.35)`は明るい背景上での微妙な深さ表現に適した安全なデフォルト値です。

  4. 4

    宣言をコピーします

    このツールは`text-shadow: Xpx Ypx Blurpx color;`を出力します。その値をスタイルシート内の該当するセレクターに置くとよいです。

実際に美しい見た目を持つテキスト影のレシピ

テキストの影は4つの数値と1つの色の組み合わせです。この点を覚えておけば、雑誌やランディングページでほぼあらゆる効果を再現できます。

チートシート

効果 宣言
控えめな奥行き text-shadow: 0 1px 2px rgba(0,0,0,0.25);
ソフトドロップ text-shadow: 0 4px 12px rgba(0,0,0,0.35);
1pxアウトライン text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
レトロなダブル text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
ネオングロウ text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

複数の影を重ねる

text-shadowはカンマ区切りのリストを受け取ります。ブラウザは画家のアルゴリズムに従い、ソース順に描画します。リスト内の最後の影がすべての要素の背面に配置されます。これを利用して輪郭線を疑似的に作り出したり（上下左右の4方向にそれぞれ1pxのハードな影を配置）、鋭い近距離の影と拡散した遠距離の影を重ね合わせて奥行きを表現したりできます。

テキストの影を使わないほうがよい場合

  • 非常に小さな本文テキストでは、2pxを超えるぼかしを掛けるとグリフがにじんで見えてしまいます。-webkit-font-smoothingやコントラストの強化を優先しましょう。
  • パフォーマンスが重要なヒーロー部分のアニメーションでは、重ねる影を3つ以下に抑えてください。レイヤーが増えるたびに、ブラウザはテキストを再ラスタライズする必要があります。
  • 複雑なパス（曲線や回転）に沿って影をぴったり合わせる必要がある場合は、SVGの<filter>とfeDropShadowの利用を検討してください。グリフの輪郭をより正確に追従できます。

よくある質問

出力は設計上、単一のシャドウレイヤーです。効果をレイヤリングするには、ジェネレータを複数回実行し、結果をカンマで連結してください（例：text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);）。

text-shadowはレンダリングされたテキストのグリフ輪郭に従います。box-shadowは要素の長方形の境界ボックスに従います。これらは類似したパラメータを採用していますが、まったく異なる形状に対してラスタ化を行います。

ブラウザはテキストの影をデバイスのピクセルグリッドに対してラスタ化します。2倍ズームディスプレイ上ではブラー値が0の影はサブピクセル位置にレンダリングされ、やや柔らかい印象を与えることがあります。ブラー値を1に設定すると、視覚的な重みを変えることなく影が明瞭になります。

入力した値は宣言を作成するために当社のサーバーへ送信されますが、保存や再利用はされません。複数ステップの表示ではリンクを通じてステップ間を移動し、単一ページの表示では何も保持されません。ページを更新するとすべてが消えます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

変更ログジェネレーター

分類した項目から Keep a Changelog 形式の Markdown セクションを作成します。Added、Changed、Fixed、Removed の各カテゴリに項目を貼り付け、Markdown かプレーンテキストを選んで出力をコピーするだけです。

このツールは他の言語でも利用できます