Creates CSS box-shadow declarations with real-time preview. Configure horizontal offset, vertical offset, blur radius, spread radius, colour (with opacity), and inset toggle for each shadow layer. Add multiple shadow layers for complex effects. Previews on a card with configurable background colour for context.
Configure your shadow properties visually and copy the box-shadow CSS value. For text shadows, use the CSS Text Shadow Generator.
Soft shadow
Input
0 4px 6px rgba(0,0,0,0.1)
Output
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Generate CSS text-shadow effects with live preview.
Generate linear, radial, and conic CSS gradients with live preview.
Generate CSS border-radius values visually.
Check WCAG AA and AAA contrast ratios for foreground and background colours.
Convert image files to Base64-encoded data URLs.
Convert Base64-encoded data URLs back to viewable and downloadable images.
box-shadow: 0px 8px 24px 0px #00000040;