Shadow Generator

Visually create CSS box-shadow and text-shadow and copy the code

Shadow Type

Shadow Layers

#1

X4px

Y4px

B10px

S0px

%25%

CSS Codebox-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

Preset Shadows

How to Use

Select shadow type (box-shadow / text-shadow)

Adjust offset, blur, spread, color, and opacity for each layer

Add more layers or choose a preset

Copy the CSS code and apply to your project

Shadow Tips

Use subtle shadows for a modern, clean look
Layer multiple shadows for depth and realism
Match shadow color to the element's surroundings for a natural feel
Use inset shadows for pressed/recessed UI effects
Avoid overly large blur values on mobile for performance

FAQ

What is box-shadow?

box-shadow is a CSS property that adds shadow effects around an element's frame. You can set X/Y offsets, blur radius, spread radius, and color. Use the inset keyword for inner shadows.

What is text-shadow?

text-shadow is a CSS property that adds shadow to text content. You can set X/Y offsets and blur radius. It does not support spread or inset values.

Can I use multiple shadows?

Yes, CSS supports comma-separated multiple shadow values. Combining multiple layers creates deeper, more realistic shadow effects.

Related Tools

Gradient Generator Border Radius Generator Color Converter

Link copied!