Codeyaan codeyaan

CSS Shadow Generator

Design box shadows and text shadows with a visual editor

CSS Tools Runs in your browser
Card Preview

Shadow Layers (1)

Output

CSS

box-shadow: 0px 4px 12px 0px #0000001a;

CSS Variable

--shadow: 0px 4px 12px 0px #0000001a;
box-shadow: var(--shadow);
1 layer26 charsbox-shadow

Presets

How to Use

1Add shadow layers using the Add Layer button
2Select a layer to adjust its offset, blur, spread, and color
3Preview the shadow on different content types (card, button, text)
4Try presets or the Random button for inspiration
5Copy the CSS or CSS variable format output

Frequently Asked Questions

What is box-shadow?

CSS box-shadow adds shadow effects around an element's frame. You can set horizontal/vertical offset, blur radius, spread radius, color, and inset (inner shadow).

Can I use multiple shadows?

Yes! This tool supports multiple shadow layers. Each layer has independent controls for offset, blur, spread, and color. Layers are combined with commas in the CSS output.

What is the difference between box-shadow and text-shadow?

box-shadow applies to the element's box (border), while text-shadow applies directly to the text content. text-shadow doesn't have spread or inset properties.

What are CSS variables for shadows?

CSS custom properties (variables) let you define a shadow value once and reuse it. Use --shadow: value; then apply it with box-shadow: var(--shadow);

Related Tools

CSS Gradient Generator

Create beautiful CSS linear and radial gradients visually

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK formats

Tailwind Colors

Browse and copy Tailwind CSS color palette values