Back to Tools

CSS Visual Editor

Create box shadows, text shadows, border radius, gradients, and more with visual controls.

Shadow Properties

Shadow 1

Preview Options

Presets

box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.2);

About the CSS Box Shadow Generator

The CSS box-shadow property adds depth to buttons, cards, and modals. Getting the offset, blur, spread, and colour right by hand is tedious — this visual generator lets you drag sliders and see the result live.

When it looks right, copy the cross-browser CSS and paste it straight into your stylesheet.

How to use the CSS Box Shadow Generator

  1. 1

    Adjust offsets

    Set the horizontal (X) and vertical (Y) offset to position the shadow.

  2. 2

    Tune blur and spread

    Increase blur for a softer shadow and spread to grow or shrink it.

  3. 3

    Pick a colour

    Choose the shadow colour and opacity, and toggle inset if needed.

  4. 4

    Copy the CSS

    Copy the generated box-shadow rule into your project.

Frequently asked questions

What do the box-shadow values mean?
The order is: horizontal offset, vertical offset, blur radius, spread radius, and colour. An optional "inset" keyword draws the shadow inside the element.
Can I add multiple shadows?
Yes. CSS supports multiple shadows separated by commas, which is great for layered, realistic depth.
Will it work in all browsers?
box-shadow is supported in every modern browser, so the generated CSS works everywhere.

More free developer tools

QR Code Generator HTML Color Picker JSON Formatter Code Minifier