美しいCSSボックスシャドウを簡単に作成
直感的なインターフェースで見事なボックスシャドウを生成します。CSSコードをコピーして、すぐにプロジェクトで使用できます。
Preview
ボックスシャドウ
カスタマイズ
CSS 出力
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
シャドウ コントロール
Position
0px
4px
Size
6px
-1px
Color
10%
Options
Presets
ソフトシャドウ
ミディアムシャドウ
ヘビーシャドウ
インナーシャドウ
シャープダイアゴナル
アウトライングロー
ダブルシャドウ
リフトエフェクト
使用方法
基本コントロール
- を調整します水平オフセット影を左または右に移動するには
- を調整します垂直オフセット影を上下に移動するには
- を増やすぼかし半径影を柔らかくする
- Use スプレッド半径影の全体的なサイズを増減するには
- を変更します。Color and Opacity影の外観をカスタマイズするには
高度な機能
- Enable インセットシャドウ内側の影の効果を作成するには
- Use 複数のシャドウより複雑なエフェクトの場合
- 保存してロードするPresetsお気に入りの影にすばやくアクセスするために
- Click ランダムシャドウインスピレーションを得るため
- 生成された CSS コードをコピーして、プロジェクトに貼り付けます