6XC

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

オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。

1,283回閲覧

サンプル見出し

text-shadowプロパティ

構文: text-shadow: x y ぼかし 色(box-shadowと違い広がり量の指定はありません)。控えめな影は見出しをページから浮き上がらせ、ぼかしゼロで強いオフセットを付けるとレトロな「くっきり影」スタイルになり、カンマ区切りで複数の影を重ねると輪郭やネオングロー効果を表現できます。

よくある質問

ネオングローはどう作りますか?

オフセットをゼロにし、ぼかしを段階的に大きくした影を明るい色で重ねます: 0 0 6px、0 0 12px、0 0 24px — すべてグローと同じ色で、暗い背景の上に配置します。

text-shadowはアクセシビリティに影響しますか?

強すぎる影は可読性を損なうことがあります。本文テキストには影を付けず、効果は大きな見出しに限定し、適用後は必ずコントラストを確認してください。

コメント

まだコメントはありません — 最初のコメントを書いてみましょう！

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSS Border(枠線)ジェネレーター 太さ・スタイル(solid、dashed、dotted、double…)・色・角丸をビジュアルに調整し、ライブプレビューで枠線をデザインします。 使ってみる