Keyword Search

  • 文字数カウントチェッカー

Tools

Design Tools

コーディング

このページはプロモーションが含まれています。

この記事のURLをコピー
CSSシャドウジェネレーター

CSSシャドウジェネレーター

CSSシャドウジェネレーターは、box-shadow・drop-shadow・text-shadowの3種類の影をブラウザ上でリアルタイムに確認しながらCSSコードを自動生成できる無料ツールです。
プリセット
シャドウ
水平 X px
垂直 Y px
ぼかし px
広がり px
不透明度 %
影の色
プレビュー要素
角丸 px
要素の背景
キャンバス背景


CSSシャドウジェネレーター box-shadow drop-shadow text-shadow
目 次

CSSシャドウジェネレーターとは？

CSSシャドウジェネレーターは、Webデザイン・コーディングで頻繁に使われる「影」のCSSプロパティをビジュアルで設定し、コードを自動生成する無料ツールです。ボックス要素に使う box-shadow・透過PNG/SVGアイコンに対応した drop-shadow・テキストに使う text-shadow の3種類をタブで切り替えて操作できます。スライダーを動かすだけでリアルタイムにプレビューとCSSコードが更新されるため、数値の手打ちと確認を繰り返す手間なく、実務で使える影をすばやく作成できます。

各機能の説明

  • 3種類のシャドウを1画面で切り替え
    box-shadow・drop-shadow・text-shadowをタブで即座に切り替えられます。それぞれ専用のスライダーとプレビュー要素が表示されるため、目的の影をすばやく設定できます。
  • 実務即戦力プリセット
    「Soft（ふんわり）」「Card（カード浮き上がり）」「Sharp（くっきり）」「Neon（発光）」など、現在のWebトレンドに沿ったプリセットを搭載。選ぶだけでスライダーが最適値に切り替わります。
  • リアルタイムプレビュー
    スライダーを動かすたびにプレビューエリアの影がリアルタイムで変化します。キャンバスの背景色をカラーピッカーで自由に変更できるので、本番環境に近い見た目で確認できます。
  • 画像アップロード対応（drop-shadowモード）
    drop-shadowモードでは画像をアップロードして、実際の素材に対して影の見え方を確認できます。透過PNG・SVGでは輪郭に沿った影を、JPEGなどでは矩形の影を確認できます。
  • 外側・内側シャドウの切り替え（box-shadowモード）
    ボタンひとつで外側（通常）と内側（inset）のシャドウを切り替えられます。要素の背景色・角丸もプレビュー上で調整でき、実際のコンポーネントに近い状態で確認できます。
  • ワンクリックコードコピー
    生成されたCSSプロパティをワンクリックでクリップボードにコピーできます。モダンCSS準拠のコードで出力されるため、そのままスタイルシートに貼り付けて使用できます。

3種類のシャドウについて

  • box-shadow（ボックスシャドウ）
    div・button・sectionなど四角い要素に影をつける最も基本的なプロパティです。X・Y・ぼかし・広がり・カラーに加え、内側の影（inset）にも対応しています。
  • drop-shadow（ドロップシャドウ）
    CSSフィルターとして使う filter: drop-shadow() です。透過PNG・SVGアイコンなど不規則な形の要素に沿ったリアルな影をつけたいときに使用します。box-shadowと異なりspread（広がり）パラメーターは使用できません。
  • text-shadow（テキストシャドウ）
    テキストそのものに影をつけるプロパティです。コピーテキストのグロー（発光）効果やエンボス表現など、タイポグラフィのアクセントに活用できます。spreadパラメーターは持ちません。

こんなときに使う

  • カードUIのbox-shadowを決めたい
    Webサービスのカードコンポーネントで「浮いた感じ」を出したいとき、Cardプリセットを起点にして高さ・ぼかしを微調整するだけで実務レベルのコードが手に入ります。
  • アイコンに透過対応の影をつけたい
    PNGアイコンやSVGにbox-shadowをかけても見た目通りにならないケースで、drop-shadowモードに切り替えることで輪郭に沿った正確な影を生成できます。
  • 見出しテキストに発光・グロー効果を加えたい
    text-shadowモードのNeonプリセットから始めると、カラーとぼかし量を変えるだけでブランドカラーに合わせた発光テキストを短時間で作れます。
  • ボタンのhoverエフェクト用に控えめな影を作りたい
    Softプリセットを選んでYオフセットを小さくした値が、ボタンの通常状態とhover後の影に使いやすいです。数値の組み合わせを試行錯誤する時間を大幅に短縮できます。
  • ダークモードでの影の見え方を確認したい
    キャンバス背景色をカラーピッカーでダーク系に変更することで、ダークモードUIでの影の視認性・自然さを事前に確認できます。

よくある質問

  • Q

    box-shadowとdrop-shadowはどう使い分ければいいですか？

    A

    背景が透過していない四角い要素（div・button・カードなど）にはbox-shadowを使います。透過PNG画像やSVGアイコンなど不規則な形状の要素には filter: drop-shadow() を使うと、輪郭に沿った自然な影が得られます。「箱型の影でよければbox-shadow、形に合わせた影が必要ならdrop-shadow」と覚えておくと迷いません。

  • Q

    inset（内側の影）はどんな場面で使いますか？

    A

    insetを有効にすると、要素の内側に影が落ちます。主な用途は「押し込まれたボタンのactive状態」「凹んだテキスト入力欄の装飾」「ニューモーフィズムデザインの凹面表現」などです。外側のbox-shadowと組み合わせて記述することもでき、多重影表現の一部としても使われます。

  • Q

    Spread（広がり）を負の値にするとどうなりますか？

    A

    Spreadを負の値にすると、影が要素の辺よりも内側に縮んだ状態で広がります。Y方向だけに影を落としたいときにSpreadをマイナスにすることで左右の影をカットし、下方向だけのシャープな影を作ることができます。自然なカード浮き上がり表現でよく使われるテクニックです。

  • Q

    生成されたコードにベンダープレフィックスは必要ですか？

    A

    box-shadowとtext-shadowは主要ブラウザ（Chrome・Firefox・Safari・Edge）すべてでプレフィックスなしに対応しています。このツールではモダンCSS準拠のコード（プレフィックスなし）を生成します。filter: drop-shadowも同様にプレフィックス不要です。IE11をサポート対象に含める場合のみ別途対応が必要になります。

  • Q

    アップロードした画像はサーバーに送信されますか？

    A

    いいえ、アップロードした画像を含むすべての処理はブラウザ内のJavaScriptで完結しています。画像・設定値がサーバーに送信・保存されることは一切ありません。業務用の素材も安心してご利用いただけます。