メインコンテンツにスキップ
ToolShed
ホーム
人気
新着ツール
すべてのツール
読み込み中...
ホーム
デザイン・CSS
Box Shadow生成
デザイン・CSS
無料
登録不要
Box Shadow生成
CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。
Preview background:
#ffffff
Layer 1
+ Add Layer
Offset X
0px
Offset Y
4px
Blur Radius
16px
Spread Radius
0px
Opacity
20%
Color
#000000
Inset
CSS Output
Copy CSS
box-shadow: 0px 4px 16px 0px #00000033;
FAQ
よくある
質問
CSSのbox-shadowプロパティの書き方は？
+
box-shadow: 水平 垂直 ぼかし 広がり 色の形式で指定します。例えば「box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.2)」は右下に影を付けます。insetを付けると内側の影になります。
box-shadowはパフォーマンスに影響しますか？
+
複数の影を重ねたリッチなシャドウ効果は作れますか？
+
バリエーション
関連
バリエーション
ニューモーフィズム生成
テキストシャドウ生成
関連ツール
こちらも
おすすめ
テキストシャドウ生成
CSSのtext-shadowをGUIで直感的に作成。多重シャドウ、ネオンエフェクト、立体文字など表現豊富。コードをワンクリックコピー。無料オンラインツール。
border-radiusジェネレーター
CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。
CSSアニメーション生成
CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。Web開発に便利な無料ツール。
CSS box-sizing
CSS box-sizingの値と挙動を一覧表示する無料オンラインツール。
CSS角度単位
CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。
animation-direction
animation-directionを表示する無料オンラインツール。animation-directionをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。
Box Shadow Generator | Design & CSS | ToolShed | ToolShed