CSS Shadow Generator
Build a CSS box-shadow or text-shadow with adjustable offset, blur, spread and color, with a live preview.
Your file is processed locally in your browser and is not uploaded to our server.
Color
%
CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.4);How to use CSS Shadow Generator
- 1Choose box-shadow or text-shadow.
- 2Adjust offset, blur, spread and color with live preview.
- 3Copy the generated CSS.
Frequently asked questions
Spread expands or contracts the shadow shape before blurring — text-shadow does not support a spread value.
Related tools
Developer
CSS Border Generator
Build a CSS border and border-radius visually.
Developer
CSS Gradient Generator
Build a linear or radial CSS gradient visually.
Developer
CSS Transform Generator
Build a CSS transform (translate/rotate/scale/skew) visually.
Developer
Color Harmony Generator
Generate complementary, analogous or triadic color schemes.
Developer
CSS Animation & Transition Generator
Build a CSS transition or keyframe animation visually.