美しい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 コードをコピーして、プロジェクトに貼り付けます
Related Tools
CSSコンバーターへのレス
LessのコードをCSSに変換します。高速、簡単、安全。
SCSSからCSSへのコンバーター
SCSS コードを CSS に変換します。高速、簡単、安全。
美しいCSSテキストグラデーションを簡単に作成
あなたのウェブサイトのための見事なグラデーションテキスト効果を作成する
ASCIIからバイナリへ
ASCII文字をバイナリコードに簡単に変換
画像からBase64へのコンバーター
Web開発とデータ埋め込みのために画像をBase64エンコーディングに変換
長さコンバーター
異なる長さの単位間で簡単かつ正確に変換します。日常の使用やプロフェッショナルなアプリケーションに最適です。