Wyvek

CSS Box Shadow Generator

Build CSS box-shadows visually.

px
px
px
px
%
Preview

Free CSS box-shadow generator

This box-shadow generator lets you design layered, natural-looking shadows without memorising the syntax. Drag the sliders for horizontal offset, vertical offset, blur, and spread, pick a color, set the opacity, and watch the preview update instantly. When it looks right, copy the ready-to-use box-shadow declaration straight into your stylesheet. Every value maps directly to real CSS, so what you see is exactly what your element will render in the browser.

How to use the box-shadow generator

  1. Set the horizontal and vertical offsets to position the shadow.
  2. Increase blur for a softer edge and adjust spread to grow or shrink the shape.
  3. Choose a color and lower the opacity for a subtle, realistic look.
  4. Toggle Inset to move the shadow inside the element for pressed or inner-glow effects.
  5. Click Copy CSS and paste the declaration into your project.

Tips for great shadows

Realistic shadows usually use a low opacity (10–30%), a small vertical offset, and a generous blur — sharp, fully opaque shadows tend to look dated. Stick to one light source across your interface so shadows fall in a consistent direction. For elevated cards, a soft downward shadow works well; for depth on buttons, try a subtle inset shadow.

Related design tools

Pair your shadows with a matching background from the CSS gradient generator, or fine-tune the exact shadow color with the color converter to switch between hex, RGB, and HSL values.

Frequently asked questions

What is a CSS box-shadow?

The box-shadow property adds one or more shadows around an element's frame. Each shadow is defined by a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius, and a color. This generator lets you dial those values in visually and copies the exact CSS for you.

How do offset, blur, and spread differ?

The horizontal and vertical offsets move the shadow left/right and up/down. Blur radius softens the edge — a larger value makes the shadow fuzzier. Spread grows (positive) or shrinks (negative) the shadow before the blur is applied, so it changes the overall size of the shadow shape.

What does the inset option do?

By default a shadow is cast outside the element. Turning on Inset draws the shadow inside the element's edges instead, which is handy for pressed buttons, inputs, and inner-glow effects. The CSS simply gains the inset keyword at the start.

Why is the color written as rgba()?

Using rgba() lets the shadow have its own opacity independent of the element. The tool converts your chosen hex color plus the opacity slider into an rgba() string — for example a black color at 25% becomes rgba(0, 0, 0, 0.25) — which gives soft, realistic shadows.

Is my work sent to a server?

No. Everything runs in your browser with JavaScript. The preview and CSS are generated locally as you move the sliders, so nothing is uploaded or stored.

JSON Formatter & Validator Beautify, minify, and validate JSON instantly. Regex Tester Test regular expressions with live matches. JWT Decoder Decode and inspect JWT tokens. URL Parser Break a URL into its components.