The box-shadow CSS property adds shadow effects around an element's frame.

How do I make a glow effect?

Set offsets to 0, use a bright color, and increase the blur radius.

Is it mobile friendly?

Yes, this tool works on all devices.

Does it support inset shadows?

Yes, use the Inset checkbox to create inner shadows.

What browsers support box-shadow?

All modern browsers including Chrome, Firefox, Safari, and Edge.

Can I use rgba colors?

Yes, the opacity slider automatically generates an rgba color value.

CSS Box Shadow Generator

Create beautiful, smooth CSS shadows with this visual generator. Adjust offset, blur, spread, and color, then copy the code.

Last updated: 2026-03-19

Shadow Controls

Horizontal Offset (10px)

Vertical Offset (10px)

Blur Radius (20px)

Spread Radius (0px)

Opacity (0.25)

Shadow Color

Inset Shadow

Live Preview

Box

CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);

Key Features

Visual Controls: Sliders for X/Y offset, blur radius, spread, and opacity.
Real-time Preview: See exactly how the shadow looks on a card element.
Inset Support: Toggle between outer (drop) shadows and inner shadows.
Copy Ready: One-click to copy the exact CSS property.

How to Use This Box Shadow Generator

Use the Horizontal and Vertical sliders to move the shadow.
Adjust Blur Radius to make the shadow softer or sharper.
Use Spread to increase or decrease the shadow's size.
Control transparency with the Opacity slider.
Check Inset to create an inner shadow (like a pressed button).
Copy the generate CSS and paste it into your stylesheet.

Why Use Use a UI Generator for CSS Shadows?

Writing `box-shadow` properties by hand involves guessing pixel values and refreshing to see the result. This tool allows you to visually tweak the "feel" of the shadow instantly. You can easily create modern "elevation" effects or subtle depth layers without memorizing the complex parameter order.

Frequently Asked Questions

What is the order of box-shadow values?

The standard order is: `h-offset v-offset blur spread color`. If using inset, the keyword `inset` comes first or last.

How do I make a soft shadow?

Increase the Blur Radius and lower the Opacity. Soft shadows usually have 0 spread and higher blur.

Can I layer multiple shadows?

CSS supports multiple shadows separated by commas. This simple generator creates a single shadow layer, which is sufficient for 90% of use cases.

Is spread required?

No, the spread radius is optional. If omitted, it defaults to 0 (same size as the element).

Does this work for text-shadow?

The syntax is very similar, but `text-shadow` does not support the `spread` value or the `inset` keyword. You can use the first three values (offset and blur) for text shadows.

Does this work in all browsers?

Yes, `box-shadow` is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge).

Preview

CSS Box Shadow Generator — visual shadow builder with blur spread and color controls