CSS Box Shadow Generator
Generate CSS box shadows visually with live preview
About CSS Box Shadow Generator
CSS Box Shadow Generator is a free browser-based tool that lets you create CSS box-shadow styles visually using sliders and colour pickers, with a real-time live preview. Adjust horizontal and vertical offset, blur radius, spread radius, colour, opacity, and inset toggle — and the corresponding CSS property code is generated instantly for you to copy into your stylesheet.
The CSS box-shadow property is one of the most versatile visual effects available in CSS. It creates a shadow effect around an element's frame, enabling depth, elevation, and visual hierarchy in web interfaces. A box shadow is defined by its horizontal offset (X), vertical offset (Y), blur radius, spread radius, colour, and an optional inset flag. Multiple shadows can be stacked by providing comma-separated values.
Material Design popularised the concept of paper-like elevation layers defined by box shadows, with each elevation level having a specific shadow definition. The Neumorphism design trend uses carefully tuned inset and outset shadows of contrasting colours to create soft, embossed interface elements. This tool makes it easy to replicate or experiment with these design systems.
Front-end developers use box shadow generators to quickly prototype shadow values without writing CSS by hand, testing multiple options, and converging on the right look before committing to the code. The live preview makes it immediately clear how changes to blur versus spread affect the visual output — knowledge that takes considerable trial-and-error to internalise by reading code alone.
The generated output is a single CSS property value: box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25). This value can be dropped directly into any CSS rule, Tailwind config, CSS-in-JS style object, or design token. The tool also shows how to apply multiple layered shadows for more complex effects.
Understanding box shadow parameters: X-offset shifts the shadow left (negative) or right (positive). Y-offset shifts it up (negative) or down (positive). Blur radius makes the shadow soft — a value of 0 creates a hard-edged shadow. Spread radius expands (+) or contracts (−) the shadow beyond the element size. Inset reverses the shadow to the inside of the element.
No server is required. The CSS is generated entirely in your browser using real-time DOM manipulation. Your designs stay private.
How to Use CSS Box Shadow Generator
- 1Use the sliders to adjust horizontal offset, vertical offset, blur, and spread
- 2Pick a shadow colour using the colour picker and set the opacity
- 3Toggle "Inset" to flip the shadow to the inside of the element
- 4Copy the generated CSS box-shadow value and paste it into your stylesheet
Frequently Asked Questions
Blur radius controls how soft or hard the edge of the shadow is. A blur of 0 creates a sharp, hard-edged shadow; larger values create a soft, feathered shadow. Spread radius controls the size of the shadow relative to the element — a positive spread makes the shadow larger than the element, a negative spread makes it smaller.
Neumorphism uses two box shadows: one lighter than the background and one darker, both offset in opposite directions. For example: box-shadow: -6px -6px 12px #ffffff, 6px 6px 12px rgba(0,0,0,0.15). The background colour of the element must match the page background.
Yes. CSS allows multiple box shadows separated by commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15). Shadows are rendered front-to-back (the first shadow is on top).
An inset shadow appears inside the element rather than outside, creating a sunken or embossed effect. Add the inset keyword at the beginning of the shadow value: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2).
Yes. CSS box-shadow has been supported in all major browsers (Chrome, Firefox, Safari, Edge) since 2011 and requires no vendor prefixes in modern development.
You might also like
Try next