CSS Box Shadow Generator

How it works

Type your shadow colour into the left panel: one colour on a single line, in HEX, RGB or HSL notation. Most interface shadows start from plain black — you control the darkness with the opacity slider, not the colour itself, so 25% opacity comes out as rgba(0, 0, 0, 0.25) in the code. The horizontal and vertical offsets set where the shadow falls: keeping the vertical offset at 8 pixels and the horizontal at zero gives the natural top-light look used almost everywhere. Blur decides how soft the edge is, and spread how far the shadow extends past the box; a negative spread tucks the shadow under the box for a subtle lifted-card effect. The direction option switches the outer shadow to an inset one, which makes the box look pressed into the surface. The code on the right refreshes on every change — copy it into your stylesheet, or press Download to save the preview as a 1200×800 pixel PNG.

This tool is also known as css box shadow generator, box shadow css, box shadow examples, inset shadow css, css shadow code, smooth box shadow.

What is box-shadow?

box-shadow is the CSS property that draws a shadow outside or inside an HTML box. It needs at least an offset pair and a colour; blur and spread are optional, and the inset keyword moves the shadow inside the box. The shadow never changes the box's size and never catches clicks — it is pure paint, which makes it the cheapest way to add depth without disturbing the layout. Several shadow layers can be stacked on one box with commas.

What is rgba()?

rgba() is the CSS colour notation that defines a colour by its red, green and blue channels from 0 to 255, plus a fourth parameter: an opacity between 0 and 1. rgba(0, 0, 0, 0.25) means black at a quarter strength — the surface underneath still shows through at 75 percent. Shadow colours almost always use this form, because a natural shadow is translucent and blends with whatever background it falls on.

What is the difference between box-shadow and drop-shadow?

box-shadow draws the shadow around the element's rectangular box: it follows rounded corners, but if the content is a transparent PNG or a clipped shape, the shadow still falls as a rectangle. filter: drop-shadow() looks at the visible pixels instead: a logo on a transparent background casts a shadow that traces its own outline. In exchange, drop-shadow accepts no spread value and knows no inset — when you need an inner shadow or a spread layer, box-shadow is the only option. The practical rule: box-shadow for rectangular cards and panels, drop-shadow for shaped images.

The harsh shadow trap: balancing opacity and blur

The most common beginner mistake is a fully opaque black shadow with little blur: instead of soft depth, the box gets a dirty outline. Real shadows are both translucent and diffuse, which is why interface shadows usually sit between 10 and 30 percent opacity, with a blur of at least two to three times the offset. A 0 8 24 pixel shadow looks natural at 25% opacity and like a smudge at 100%.

The second trap is performance: box-shadow is repainted on every frame. Give dozens of boxes a large-blur shadow on a scrolling page and older devices may stutter. Applying the same look to fewer boxes, or cutting the blur down, usually lowers the cost without any visible difference.

Which shadow fits which job?

A shadow is not decoration but a language of elevation: users read which element sits on top from its shadow.

• Cards and panels → small offset, medium blur (like 0 2 8): slightly lifted off the page
• Dropdowns and dialogs → large offset and blur (like 0 12 32): floating above the page
• Pressed buttons, input fields → inset shadow: sunk into the surface
• Focus highlight → zero offset and blur with a 2-3 pixel spread: wraps the box like a ring

Frequently asked questions

What does the order of box-shadow values mean?

The order is fixed: horizontal offset, vertical offset, blur, spread, then the colour. A leading inset keyword drops the shadow inside the box. This tool always writes all five values in that exact order, so you can trace each slider to its place in the code.

Can I stack several shadows on one box?

CSS allows it: shadows are listed comma-separated and the first one paints on top. This tool produces a single layer to keep the code readable; for two layers, run it twice with different settings and join the values with a comma.

What does the Download button save?

A 1200×800 pixel PNG of the previewed card — handy for putting the shadow's look into a design review or a mock-up. For the code itself use the copy button.

Why is the shadow colour written as rgba?

Because translucency is what makes a shadow look natural: the last number in rgba is the opacity between 0 and 1, and the opacity slider sets exactly that. With a plain HEX colour the shadow would paint fully opaque and hide the background completely.