CSS Box Shadow Generator

What is css box shadow generator?

A box shadow adds depth to cards, buttons, menus and images. Soft, low opacity shadows look natural, while hard dark ones look heavy.

This generator shows the result live and writes the CSS for you, including a proper rgba color so you can control opacity.

How to use the css box shadow generator

1. Move the values until the preview looks right.
2. Pick the shadow color and opacity.
3. Copy the CSS line.

How the css box shadow generator works

The shadow is written as offset x, offset y, blur, spread and a color. The hex color and opacity are converted to an rgba value. The inset option places the shadow inside the box.

Worked example

Common uses of the css box shadow generator

• Card and panel design.
• Button hover effects.
• Modal and menu depth.
• Image frames.
• Learning how shadows work.

Tips and common mistakes

Use a larger blur and lower opacity for a soft look.

Match the shadow direction across your whole design.

Background: what to know before you rely on it

Shadows tell the eye which elements sit above others. Material and many modern design systems use layered shadows, a tight dark one for contact and a wide soft one for height. This generator makes one layer, and you can combine several by hand. Large blurs on many elements can slow rendering on weak devices, so use them with care on long lists. Keep opacity low and color slightly tinted toward your background for the most natural result.

Private, free and fast

This tool runs entirely in your browser. What you type or choose is not uploaded to a server and is not saved after you close the page, which keeps it fast and private. It is free to use as often as you like. See more in all developer tools, or browse the full list of tools.

Related tools

Results are for information and education. For legal, financial, medical or security decisions, check with a qualified professional. Do not paste live secrets into any website.