CSSボックスシャドウジェネレーター
無料オンラインCSSボックスシャドウジェネレーター。ライブプレビューでオフセット、ぼかし、広がり、色、不透明度をスライダーで調整できます。
Shadow List
Generated CSS
使い方
- ジェネレーターを開くと、ボックスシャドウのライブプレビューがすぐに表示されます。
- 水平・垂直オフセットのスライダーを動かして、シャドウの位置を調整します。
- ぼかし半径とスプレッドを設定して、シャドウの柔らかさと大きさをコントロールします。
- デザインに合わせてシャドウの色と不透明度を選択します。
- 生成されたCSSコードをコピーして、スタイルシートに直接貼り付けます。
例
入力: 水平: 5px, 垂直: 10px, ぼかし: 15px, スプレッド: 2px, カラー: #333333, 不透明度: 0.5
結果: box-shadow: 5px 10px 15px 2px rgba(51, 51, 51, 0.5);
よくある質問
はい、CSSボックスシャドウジェネレーターは完全無料で、登録やアカウントも不要です。
データは完全に安全です。すべての処理はブラウザ内でクライアントサイドで行われます。いかなるデータもサーバーに送信されることはありません。
はい、CSSではカンマ区切りで複数のbox-shadow値を指定することができ、重ねたシャドウ効果を作れます。
はい、box-shadowプロパティはすべての主要な現代ブラウザでベンダープレフィックスなしにサポートされています。
'inset'キーワードをbox-shadow値に追加することで、要素の内側にシャドウを適用することができます。