ツール一覧 / box-shadow生成

box-shadow 生成ツール

CSSの影(box-shadow)を、スライダーで調整しながら作ります。 距離・ぼかし・広がり・色・内外を変えるとプレビューが即座に追従。影を重ねる「多重影」にも対応します。

無料登録不要ブラウザ内で完結

調整

プレビュー

重ねた影 (複数重ねると立体的になります)

CSS

デザインごと相談したい場合

影・角丸・余白の一貫性は、テーマ側でCSS変数にしておくと崩れません。AETHERはそれが最初から整っています。

AETHERを見る

ほかの道具も見る

72本すべてを見る →

box-shadowの5つの値

box-shadow: X Y ぼかし 広がり 色; の順です。 Xは左右、Yは上下のずれ。ぼかしを大きくすると柔らかく、 広がりを負の値にすると影が小さく締まります。

きれいに見える影のコツ

濃くて真っ黒な影は、安っぽく見えがちです。 色を少し青や紫に寄せ、濃さ(不透明度)を10〜20%程度に抑えると、上品で自然な影になります。 Yを少しだけ下げ、ぼかしを広めに取ると、ふわっと浮いた印象になります。

多重影で立体感を出す

影は , で区切って何枚でも重ねられます。 「近くて濃い小さな影」と「遠くて薄い大きな影」を重ねると、 1枚だけのときより自然で奥行きのある見え方になります。このツールの「影を追加」で試せます。

このツールについて

入力内容はブラウザの中だけで処理され、サーバーに送信されることはありません。