RevealTheme logo

CSS Box Shadow Generator

Build a single CSS box-shadow value with four sliders and a color picker. The preview updates live and the generated CSS appears in the output box ready to copy.

box-shadow: 0px 8px 16px 0px #00000033;

How to use this tool

  1. 1

    Drag the X offset and Y offset sliders (each from -50px to 50px) to move the shadow horizontally and vertically.

  2. 2

    Adjust the Blur slider (0px to 100px) to soften the edges, and the Spread slider (-50px to 50px) to grow or shrink the shadow.

  3. 3

    Pick a shadow color with the color swatch; the live preview square updates as you change any control.

  4. 4

    Copy the generated box-shadow declaration from the output box at the bottom and paste it into your stylesheet.

What does CSS box-shadow do, and what does this generator produce?

The CSS box-shadow property draws a shadow around an element's box. Its longhand form is four lengths plus a color: horizontal offset, vertical offset, blur radius, spread radius, and color — for example box-shadow: 0px 8px 16px 0px #00000033. Positive X moves the shadow right, positive Y moves it down. Blur radius softens the edge (0 is a hard edge); spread radius grows (positive) or shrinks (negative) the shadow before blurring. This tool generates exactly one outer shadow from four range sliders and a color picker, with the result shown as a single box-shadow declaration. It does not emit the inset keyword, so it only produces outer shadows, and it does not stack multiple comma-separated shadows for you — stacking is a valid CSS feature, but here you would copy this value and add more by hand. One subtlety: the default color #00000033 includes an alpha channel (the trailing 33 is roughly 20% opacity), but a native HTML color picker cannot represent transparency, so choosing a new color produces an opaque six-digit hex.

Common use cases

  • Designing a soft elevation shadow for buttons or cards, then tuning Y offset and blur until the depth looks right.

  • Prototyping a Material-style shadow by stacking the value this tool outputs with a second hand-written shadow.

  • Generating a tight, low-blur shadow with negative spread for a crisp focus or hover state.

  • Getting an exact box-shadow string to paste into a Tailwind arbitrary value, CSS module, or inline style.

  • Teaching the difference between blur and spread by dragging each slider and watching the preview react.

  • Quickly matching a shadow from a design mockup by eyeballing offsets against the live preview square.

Frequently asked questions

What is the difference between blur radius and spread radius?▼
Blur radius softens the shadow's edge — larger values make a more diffuse shadow, and 0 gives a hard edge. Spread radius changes the shadow's size before it is blurred: positive values enlarge it in every direction, negative values pull it inward. In this tool blur ranges from 0 to 100px and spread from -50 to 50px.
How do I stack multiple shadows?▼
This generator only outputs one shadow at a time. CSS does support layered shadows by comma-separating several box-shadow values, so copy the value here and add more by hand, for example: box-shadow: 0px 8px 16px 0px #00000033, 0px 2px 4px 0px #00000022.
Can I create an inset (inner) shadow?▼
Not with this tool. It never adds the inset keyword, so it only generates outer shadows. To make an inner shadow, copy the value and prefix it with inset, like box-shadow: inset 0px 8px 16px 0px #00000033.
Why does my shadow become solid when I pick a color?▼
The default color #00000033 is semi-transparent (the 33 is the alpha channel), but a native browser color picker has no transparency control and always returns an opaque six-digit hex. After picking a color you get a solid shadow. To restore transparency, edit the copied value and append a two-digit alpha, for example #00000033.
What do the offset values control?▼
X offset shifts the shadow horizontally and Y offset shifts it vertically, each from -50px to 50px. Positive X moves the shadow to the right, positive Y moves it down; negative values move it the opposite way. A shadow that is below and slightly right of the element reads as natural overhead lighting.
Is my data uploaded anywhere?▼
No. The generator runs entirely in your browser using local React state. Slider positions, the color you pick, and the generated CSS never leave your device and nothing is sent to a server.

Related tools

Color Converter (HEX/RGB/HSL)

Convert colors between HEX, RGB, HSL, OKLCH.

CSS Gradient Generator

Build linear and radial CSS gradients.

Cubic Bezier Generator

Build CSS easing curves visually.

Color Palette Generator

Generate harmonious color palettes from any base color.

CSS Border Radius Generator

Build complex CSS border-radius visually.

CSS Clamp Generator

Generate responsive CSS clamp() functions.

Subscribe for updates

We do not sell your email. We do not spam.

© 2026 RevealTheme. All rights reserved.