CSS ボックスシャドウジェネレーター
オフセット・ぼかし・スプレッド・色・不透明度・インセットをライブスライダーで調整してレイヤー付き CSS ボックスシャドウを作成し、実際の要素でプレビューしてすぐ使える CSS をコピーできます。
ライブプレビュー
ライブプレビュー
CSS
box-shadow: —;
すべてブラウザ内でリアルタイムに更新 — アップロード不要、登録不要、完全無料。
シャドウレイヤー
px
px
px
px
シャドウカラー
20%
要素とキャンバス
16px
プリセット
CSS ボックスシャドウジェネレーターについて
CSSボックスシャドウジェネレーターを使えば、コード内の値を推測する代わりに、box-shadowを視覚的にデザインできます。水平・垂直オフセット、ぼかし半径、拡散半径、色、不透明度のスライダーをドラッグし(内側シャドウの切り替えも可能)、実際の要素がリアルタイムに更新されるのを確認できます。仕上がりに満足したら、貼り付け可能なCSSをワンクリックでコピーします。
モダンなUIのシャドウは単一レイヤーであることは稀です。このジェネレーターは複数のシャドウレイヤーの重ね合わせに対応しています: レイヤーの追加、複製、非表示、削除ができ、選択中のレイヤーのみ、またはすべてのレイヤーを合わせてプレビューできます。暗く締まったシャドウを柔らかく広いシャドウの下に重ねることで、洗練されたカードやボタンの奥行きが生まれます。
プレビュー要素自体(ボックスの色、境界の角丸、キャンバスの背景)もスタイリングできるため、暗い面を含む現実的な文脈でシャドウを評価できます。プリセットから始めるか、「レイヤーをランダム化」でひらめきを得て、いつでもリセットしてまっさらな状態に戻せます。すべてブラウザ内で動作します。
CSS ボックスシャドウジェネレーターの使い方
- 水平オフセット、垂直オフセット、ぼかし、拡散、色、不透明度のスライダーを調整し、内側シャドウが欲しい場合は「内側シャドウ」を切り替えます。
- 「レイヤーを追加」または「レイヤーを複製」をクリックしてシャドウを重ね、プレビューモードを「このレイヤー」と「すべてのレイヤー」で切り替えながらそれぞれを微調整します。
- プレビューが実際のデザインに合うように、要素とキャンバス(ボックスの色、境界の角丸、背景)を調整します。
- 空のスライダーから始める代わりに、プリセットを適用するか「レイヤーをランダム化」を使います。
- 完全なCSSルール(または値のみ)をコピーして、スタイルシートに貼り付けます。
よくある質問
ぼかしはシャドウの端を柔らかくします。ぼかし半径が大きいほど、シャドウはより拡散的になります。拡散はぼかしを適用する前にシャドウのサイズを広げたり縮めたりします: 正の値は要素を越えて広げ、負の値は内側に引き寄せてより締まったシャドウにします。
リアルな奥行きには通常少なくとも2つのシャドウが必要です: 接地感を出すための要素に近い小さく濃いシャドウと、環境光のためのより大きく柔らかく透明なシャドウです。このジェネレーターは任意の数のレイヤーを1つのカンマ区切りのbox-shadow値にまとめます。
内側シャドウは要素の背後ではなく内側に描画され、表面がへこんだり凹んだりしているように見せます。入力フィールド、くぼみ、切り替え済みボタンの状態によく使われます。
はい。要素とキャンバスのコントロールでボックスの色、境界の角丸、キャンバスの背景を変更できるため、CSSをコピーする前に暗い面でもシャドウが正しく見えることを確認できます。
はい、完全無料です。プレビューと生成されるCSSはブラウザ内でリアルタイムに計算され、サインアップも作成数の上限もありません。
人気の検索
css box shadow 生成
box shadow css
シャドウ生成 オンライン
css 影 作成
多重 box shadow
inset shadow css
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。