Skip to content
3Wdesign
Start a project
3Wdesign
Get in touch
  1. Home
  2. Tools
  3. Box shadow generator
Runs in your browserDesign

CSS box-shadow generator

Set the largest layer; with two or three layers each smaller one is half the size, which gives a softer, more realistic shadow.

0
12
32
-8
#0f172a
25
Runs locally — nothing is uploaded
Result
Adjust the sliders to build a shadow.

How to use

  1. 1Set the offset, blur and spread of the largest shadow layer.
  2. 2Pick the color and opacity; a dark tint of your background looks more natural than pure black.
  3. 3Choose 1–3 layers, then copy the CSS.

Real shadows are sharp near the object and soft further away. Stacking layers that double in offset and blur imitates this better than a single blurry shadow.

Each layer gets the opacity that, stacked, adds up to the value you set, so the overall darkness stays the same when you change the number of layers.

It shrinks the shadow before blurring, which keeps it from showing on the sides and makes the box look lifted.

Related tools

Contrast checkerWCAG AA/AAA contrast ratio, plus APCAColor converterHEX, RGB, HSL, OKLCH and CMYK in one goPalette generatorOKLCH color scales and harmoniesType scaleModular font sizes with a live previewCSS clamp() generatorFluid sizes between two viewport widthsPX to REM converterBatch px ⇄ rem for any root size

Let's make something good

Tell us about your project — we reply within one business day.

Get in touchServices