BYTETOOLS

CSS Box Shadow Generator

Make CSS box shadows online with offset, blur, spread, color and opacity controls. Stack multiple shadow layers, preview live and copy the box-shadow code.

Layer 1 settings

0
8
24
0
18

CSS

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);

What is the CSS Box Shadow Generator?

The CSS Box Shadow Generator gives you full visual control over box-shadow: horizontal and vertical offsets, blur radius, spread, shadow color with adjustable opacity, and an inset toggle.

  • X/Y offset, blur, spread, color and alpha controls
  • Inset shadow support
  • Multiple stacked shadow layers
  • Live preview box
  • Comma-separated multi-shadow CSS output
  • One-click copy, fully client-side

How to use the CSS Box Shadow Generator

  1. 1

    Adjust the X/Y offset, blur and spread sliders for the selected layer.

  2. 2

    Pick the shadow color and set its opacity; toggle Inset if needed.

  3. 3

    Click Add layer to stack additional shadows and edit each one.

  4. 4

    Copy the generated box-shadow CSS from the output box.

About the CSS Box Shadow Generator

The CSS Box Shadow Generator gives you full visual control over box-shadow: horizontal and vertical offsets, blur radius, spread, shadow color with adjustable opacity, and an inset toggle. The preview box updates live as you drag.

Real-world depth often comes from stacking shadows — a tight dark one plus a soft wide one. Add multiple layers, edit each independently, and the generator combines them into a single comma-separated box-shadow declaration you can copy in one click.

Everything happens locally in your browser. It is free, requires no account, and works offline once loaded.

Frequently asked questions

What do the box-shadow values mean?

The order is: offset-x, offset-y, blur-radius, spread-radius, color. For example box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15) shifts the shadow 4px down, blurs it over 12px, and paints it black at 15% opacity. An optional inset keyword draws the shadow inside the element.

How do I make a soft, realistic shadow in CSS?

Layer two or more shadows: a small, darker one for contact (e.g. 0 1px 2px rgba(0,0,0,0.2)) and a large, faint one for ambient depth (e.g. 0 8px 24px rgba(0,0,0,0.12)). Real light produces both sharp and diffuse shading, and layering imitates that.

What is the difference between blur and spread?

Blur softens the shadow's edge — higher values fade it over a wider area without enlarging it much. Spread grows (positive) or shrinks (negative) the shadow's overall size before blurring. Negative spread with high blur creates the popular tight, soft shadow look.

What does inset do in box-shadow?

inset draws the shadow inside the element's border instead of behind it, making the element look pressed or recessed. It is commonly used for input fields, toggle wells and neumorphic designs.

Do multiple box shadows hurt performance?

A few layers are fine — browsers rasterize them efficiently. Performance issues only appear with many large blurred shadows animated on many elements at once. For animated shadows, fading the opacity of a pseudo-element with a pre-rendered shadow is cheaper.

How do I generate box-shadow CSS online?

Drag the offset, blur, spread, color and opacity sliders and this box shadow generator writes the box-shadow declaration for you in real time. Stack extra layers for realistic depth, then copy the finished CSS — everything runs online in your browser, free.

Guides for CSS Box Shadow Generator

Related tools