CSS box-shadowジェネレーター
CSSのbox-shadow値を視覚的に作成します。リアルタイムでプレビューし、生成されたCSSをコピーできます。
box-shadow: 0px 8px 16px 0px #00000033;
CSS box-shadowジェネレーターとは何ですか？
CSSのbox-shadowプロパティは、水平方向のオフセット、垂直方向のオフセット、ぼかしの半径、広がりの半径、そして色を受け付けます。複数の影を重ねて、層状の効果を作ることもできます。この視覚的ジェネレーターは、どんな組み合わせのCSSも生成します。ボタン、カード、奥行きの表現などに役立ちます。
よくある質問
複数の影を重ねるにはどうすればよいですか？▼
box-shadowの値をカンマで区切ってください。影を重ねると、単一の影よりもリアルな奥行きが生まれます。
ぼかしと広がりの違いは何ですか？▼
ぼかし（blur）は影の縁を柔らかくします。広がり（spread）は、影をぼかす前にその大きさを拡大または縮小します。
関連ツール
カラー変換ツール（HEX/RGB/HSL）
色をHEX、RGB、HSLの各形式間で変換します。視覚的に色を選ぶことも、値を手動で入力することもできます。
CSSグラデーションジェネレーター
線形および放射状のCSSグラデーションを作成します。視覚的に色を選び、生成されたCSSをコピーできます。
cubic-bezierイージングカーブジェネレーター
CSS用のcubic-bezierイージングカーブを作成します。標準のプリセットも含まれています。
カラーパレットジェネレーター
任意のベースカラーから調和のとれたカラーパレットを生成します。補色、類似色、トライアド、モノクロマティックの各配色に対応しています。
CSS border-radiusジェネレーター
複雑なCSSのborder-radius値を視覚的に作成します。各コーナーを個別にコントロールできます。
CSS clamp()ジェネレーター
clamp()を使って、流動的でレスポンシブなCSSの値を生成します。ビューポートの範囲全体にわたり、最小サイズと最大サイズの間をなめらかにスケーリングします。