Tool2Help

CSS Box Shadow & Border Radius Generator

Dial in a box shadow and border radius with sliders, watch the preview update, and copy the CSS.

Preview

Shadow layers

Corner radius

Presets

Generated CSS

About the box shadow generator

Box shadow takes five values and border radius takes up to eight, which is more than anyone wants to tune by editing a stylesheet and reloading. Drag the sliders here and the preview updates instantly. Multiple shadow layers are supported, which is how convincing depth is actually built: a tight, dark shadow close to the element for contact, plus a wider, softer one for ambient light. Each corner radius can be set independently for asymmetric shapes.

How to use the box shadow generator

  1. Adjust the horizontal and vertical offset to set the shadow direction.
  2. Increase blur for a softer shadow and spread to make it larger overall.
  3. Set the shadow color and opacity, and toggle inset for an inner shadow.
  4. Set the corner radii, then copy the generated CSS.

Frequently asked questions

What do the box-shadow values mean, in order?
The order is horizontal offset, vertical offset, blur radius, spread radius, then color. An optional `inset` keyword at the start draws the shadow inside the element rather than outside it.
How do I make a shadow look realistic?
Layer two or three. Real shadows are not one uniform blur: use a small, slightly darker shadow with little blur for the contact edge, plus a larger, much more transparent one for ambient shadow. Keep all layers offset in the same direction, as though lit from a single source.
Do box shadows hurt performance?
A static shadow is cheap. Animating blur or spread is expensive, because the browser has to repaint the shadow each frame. If you need a shadow to animate, transition `opacity` on a pre-rendered shadow layer instead.
What is the difference between border-radius with a slash?
The slash syntax sets horizontal and vertical radii separately, as in `border-radius: 50% / 25%`, which produces an elliptical rather than circular curve. It is how you create organic blob shapes.

Other free tools people use alongside the Box Shadow Generator.

CSS Animation Generator Pick an animation, tune the timing, and copy complete CSS including the keyframes. Developer JSON Formatter Paste JSON to format it, validate it, or minify it. Errors are reported with the exact line and position. Developer Regex Tester Write a regular expression and see every match highlighted in your test text as you type, with capture groups broken out. Developer Placeholder Generator Generate placeholder text by paragraph, sentence or word count, and placeholder images at any dimensions you need. Design