text-shadow CSSを即座に生成。複数のシャドウレイヤーを追加し、プリセットから選択、リアルタイムでプレビューしてワンクリックでCSSをコピーできます。

ライブプレビュー

テキスト シャドウ
48px

プリセット

シャドウレイヤー

生成されたCSS

使い方
  1. レイヤーを追加 — 「レイヤーを追加」をクリックするか、プリセットを選択して即座にシャドウレイヤーを読み込みます。
  2. 各レイヤーを調整 — 水平・垂直オフセット、ぼかし半径、カラー、不透明度のスライダーを操作します。
  3. プレビューをカスタマイズ — プレビューテキスト・文字色・フォントサイズ・背景色を変更できます。
  4. CSSをコピー — 「コピー」をクリックして text-shadow ルールをスタイルシートに貼り付けます。
プリセット一覧
プリセット効果
ネオングロー同じ色相に拡大するぼかしを重ねた発光エフェクト
エンボス明暗のシャドウで浮き彫り・くぼみ感を表現
レトロハードに積み重なるシャドウでヴィンテージ印刷風に
ファイア黄色から深紅へのグラデーションで炎を表現
3D段差状のソリッドシャドウで立体感を演出
アウトライン4方向の1pxシャドウでテキストのふち取りを実現
CSS text-shadow の書式
text-shadow: 水平 垂直 ぼかし カラー, /* レイヤー1 */
             水平 垂直 ぼかし カラー; /* レイヤー2 */

  • 水平オフセット — 正の値で右方向、負の値で左方向
  • 垂直オフセット — 正の値で下方向、負の値で上方向
  • ぼかし半径 — 大きいほど滑らか（0はシャープなシャドウ）
  • カラー — rgba() も使用可能。透明度を指定してシャドウを重ねるのがコツ
複数のシャドウはカンマで区切り、前から後ろの順で重なります。
Web制作の経費管理もかんたんに
freee会計なら、デザインツール費用の経費精算もクラウドで一元管理。
freeeを無料で試す →
確定申告・会計をもっとラクに？ freee会計
なら、フリーランスの経費管理もクラウドで簡単。
関連ツール