ツール一覧に戻る
CSS Box Shadow Generator
開発者Visually construct CSS layer shadows and generate cross-browser code.
ttb run box-shadow-generator
Shadow Properties
Horizontal Offset (px)10 / 100
Vertical Offset (px)10 / 100
Blur Radius (px)15 / 100
Spread Radius (px)-3 / 100
Opacity (%)20 / 100
Live Preview
Box
CSS Output
box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.2);
このツールを共有:
CSS Box Shadow Generator の使い方
Adjust the sliders for horizontal offset, vertical offset, blur radius, spread radius, and shadow color. The live preview updates in real-time as you tweak values. Layer multiple shadows for complex depth effects. Copy the generated CSS code and paste it directly into your stylesheet.
1
Enter your parameters
Configure the inputs for the Box Shadow Generator according to your specific needs.
2
View real-time results
The utility instantly processes your request and displays the calculated outputs directly in your browser.
3
Copy or Download
Click the copy icon next to the final output to instantly grab the result, or export it if applicable.
よくある質問
What is the spread radius?+
Spread radius expands or contracts the shadow. Positive values make the shadow larger than the element, negative values make it smaller. A spread of 0 makes the shadow the same size as the element.
Can I add multiple shadows?+
Yes! CSS supports comma-separated multiple box shadows. Layering a tight, dark shadow with a wide, soft one creates realistic, material-design-style depth effects.