Skip to content
HQ8T

Box Shadow Generator

Design CSS box shadows visually.

box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.2);
border-radius: 16px;

How to use

  1. 1Move the sliders for offset, blur, spread and opacity.
  2. 2Pick shadow and box colours, or tick Inset.
  3. 3Start from a preset like Soft or Card if you like.
  4. 4Copy the CSS.

Frequently asked questions

What's the difference between blur and spread?

Blur softens the shadow's edge. Spread makes the shadow bigger (positive) or smaller (negative) before blurring.

What does inset do?

It puts the shadow inside the box, making it look pressed in.

Why use a low opacity?

Real shadows are soft. 10–25% black usually looks more natural than a solid dark shadow.

Does box-shadow slow down my site?

Normal shadows are fine. Very large blurred shadows on many animated elements can affect scrolling on slow phones.

You may also need