chevron_right

Box Shadow ジェネレーター

CSSボックスシャドウをリアルタイムプレビューで視覚的に作成します。

プリセット

シャドウ {{idx + 1}}

水平オフセット: 0px

垂直オフセット: 4px

ぼかし: 16px

広がり: 0px

カラー

内側

Outset

生成されたCSS

box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.15);

関連ツール

Border Radius ジェネレーター

コーナーの丸みを視覚的にコントロールしてCSSをコピーします。

CSS Clip-Path ジェネレーター

ライブプレビューでCSS clip-path形状を生成します。

Shadow Palette Generator

Generate layered shadow styles for interface design.

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

ライブプレビュー付きで CSS text-shadow を作成します。

Markdownテーブル生成

単純なカンマ区切りの見出しと行から Markdown テーブルを生成します。

SVG ストローク→塗りつぶし変換

SVGのストローク要素を塗りつぶしパスに変換して互換性を向上させます。

ドメイン名ジェネレーター

キーワードに基づいてスコア付きのドメイン候補を生成します。

apps

無料オンラインツールの全コレクションを見る。

長い CSS を手で調整せずに多層シャドウを作成

box-shadow は最初の一つを書くのは簡単ですが、オフセット、ぼかし、広がり、色、複数レイヤーを細かく調整し始めると一気に面倒になります。このジェネレーターを使えば、見た目を確認しながら素早く調整できます。

このツールで試せること

繊細な影から強めの演出まで、次の要素を調整できます。

水平と垂直のオフセット
ぼかし半径と広がり半径
色とアルファ透明度
内側シャドウと外側シャドウ
複数のシャドウレイヤー

こんな用途で便利です

ボックスシャドウ生成ツールは、次のような場面で役立ちます。

カードに立体感をつけたいとき
モダンな UI コンポーネントに柔らかい影をつけたいとき
内側の影やグロー効果を試したいとき
デザインシステム用に再利用しやすい CSS を作りたいとき

多層シャドウはやりすぎに注意

複数のシャドウを重ねると洗練された奥行きが出せますが、すぐに重たく見えることもあります。気に入った効果ができたら、明るい背景と暗い背景の両方で確認しておくと安心です。