CSS Box Shadow Generator – Layered, Inset & Soft Shadows

How to use Box Shadow Generator

1Start from a preset such as Soft, Layered or Inset, or adjust the default shadow.

2Drag the sliders for horizontal and vertical offset, blur, spread and opacity, and pick a shadow color.

3Add more layers for realistic depth, and set the corner radius and preview colors.

4Copy the CSS and paste it into your stylesheet.

Design CSS shadows visually

Shadows give interfaces depth: they lift cards off the page, show which button is pressed and separate a dialog from the content behind it. The CSS box-shadow property is powerful but its five numbers are hard to tweak blind. This generator gives you sliders and a live preview, lets you stack several shadows for a natural look, and outputs clean CSS you can paste straight into your project.

Features

Offset, blur, spread, color and opacity controls with instant preview.
Up to five layers combined into one box-shadow declaration.
Inset shadows for pressed and recessed effects.
Corner radius and preview colors to match your design.
Presets for soft, medium, hard, layered, inset and glow shadows.
Copy-ready CSS with colors in rgba() format.

Example

A layered shadow that looks natural on light backgrounds:

.card {
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
    0px 4px 8px 0px rgba(0, 0, 0, 0.07),
    0px 16px 32px 0px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
}

Shadow design tips

Goal	Suggested settings
Subtle card on white	y 4, blur 12, opacity 8%
Floating dropdown or dialog	2–3 layers, y up to 24, blur up to 48, opacity 7–12% each
Retro "flat" look	x 6, y 6, blur 0, opacity 100%
Focus or glow effect	x 0, y 0, blur 16–24, spread 2–4, brand color
Pressed input field	inset, y 2, blur 6, opacity 25–30%

Keep the light source consistent: if shadows fall downward on one component, they should fall downward everywhere.

Related tools

Create the background behind your cards with the CSS Gradient Generator, convert colors between HEX, RGB and HSL with the Color Converter, or pick colors from a screenshot with the Image Color Picker.

Frequently asked questions

What do the four box-shadow values mean?

In order, they are the horizontal offset (positive moves the shadow right), the vertical offset (positive moves it down), the blur radius (larger is softer) and the spread (positive makes the shadow bigger than the element, negative makes it smaller). The color comes last.

Why use several shadow layers?

Real shadows are sharp and dark close to an object and soft and faint further away. Stacking two or three shadows with increasing offset and blur but low opacity imitates this and looks much more natural than a single heavy shadow.

What is an inset shadow?

An inset shadow is drawn inside the element instead of outside, making it look pressed in. It's often used for input fields, pressed buttons and wells.

Why does my shadow look grey on a colored background?

Black shadows look dull on colored surfaces. Try a darker shade of the background color for the shadow instead of pure black — it looks richer and more natural.

Do box shadows affect performance?

A few shadows are cheap. Very large blur radii on many elements, or animating box-shadow on scroll, can slow rendering on low-end phones. To animate a shadow, fade the opacity of a pseudo-element that has the shadow instead.