CSS ジェネレーター

ボックスシャドウ Shadow ジェネレーター

直感的なビジュアルエディターで、美しい CSS Box Shadow を簡単に作成できます。 複数 shadow の重ね合わせ、Inset shadow、すべての操作のリアルタイムプレビューに対応します。

シャドウ一覧
Shadow プロパティ
内側
影の色
HEX
RGB
HSL
アルファ %
既定のスタイル
即時プレビュー
広い 高
CSS コード
box-shadow: 4px 4px 10px 0px rgba(30, 41, 59, 0.75);

機能

複数シャドウの重ね合わせ
内側シャドウ／外側シャドウ
即時プレビュー
35 種類以上のプリセットスタイル
カラーピッカー
ワンクリックで CSS をコピー
PNG をエクスポート
元に戻す/やり直す
レスポンシブプレビュー

使い方

  1. 調整 水平オフセット（X） 付き 垂直オフセット（Y） 影の位置を指定します。
  2. 増加 ぼかし半径 シャドウをより柔らかくするには、次を調整します 拡散半径 影のサイズを調整。
  3. 選択 影の色 および調整 透明度（Alpha）。
  4. 切り替え 内側 Inner Shadow 効果を作成し、複数レイヤーの Shadow を追加して複雑な表現を作れます。
  5. 参照 既定のスタイル またはクリック ランダム アイデアを得るためのボタン。
  6. コピー CSS コード または PNG をダウンロード プロジェクトで使用されます。

よくある質問

CSS box-shadow とは何ですか？
CSS box-shadow 要素へ影を付ける CSS property です。水平 offset、垂直 offset、blur radius、spread radius、color、必要に応じて内側 shadow 用の inset keyword を指定できます。複数の shadow はカンマで組み合わせられます。
複数の shadow を作成するには？
クリック 影を追加 ボタンで別の影レイヤーを追加できます。各レイヤーには個別のプロパティがあり、 上下矢印 順序を調整すると、すべての layer が 1 つの box-shadow CSS value に統合されます。
Inset とは何ですか？
内側シャドウ（inset） element の内側へ表示され、くぼんだ・押し込まれたような効果を作ります。switch 内側シャドウ switch で inner shadow と outer shadow を切り替えます。
これらの shade は正式サイトでも同じように表示されますか？
はい！生成される CSS は標準仕様に準拠しています box-shadow この構文は Chrome、Firefox、Safari、Edge など主要な現行ブラウザに対応し、通常の本番環境で利用できます。
このツールは無料ですか？
はい。完全無料で登録も不要です。すべての処理はブラウザ内でローカル実行され、データがサーバーへ送信されることはなく、shadow 設定が外部へ書き出されることもありません。

ブラウザー互換性

Chrome 10+
Firefox 4+
Safari 5.1+
Edge 12+
Opera 10.5+
iOS Safari 5+
Android 4.4+
IE 10+

プライバシーステートメント

このツールは完全にブラウザ内で実行されます。作成したデータ、色、シェーディングはサーバーへ送信されず、作業内容は端末内に保持されます。このツールでは Cookie や追跡機能を使用しません。