Skip to content
Rotina Diária

CSS Box Shadow Generator

Create layered CSS shadows with inset options and a live preview, then copy the ready-to-use code.

Suggestions

Processed on your device. Nothing you type is sent anywhere.

How to use: CSS Box Shadow Generator

  1. Adjust the horizontal and vertical offset, blur, spread, color, and opacity for each shadow.
  2. Add more layers for realistic shadows, or choose a preset.
  3. Copy the box-shadow line and paste it into your CSS.

About this tool

The box-shadow property takes these values in order: X offset, Y offset, blur, spread, and color—with optional inset for inner shadows. Multiple comma-separated values stack, creating more natural shadows: combine a short, defined layer with a longer, softer one to mimic real light.

Use black with low opacity (10% to 25%) instead of solid gray so the shadow works on any background. Negative spread pulls the shadow closer beneath the element, a common effect for cards and floating buttons.

Frequently asked questions

What’s the difference between box-shadow and drop-shadow?

box-shadow follows the element’s rectangle (and border-radius). The drop-shadow filter follows the content’s actual shape, including transparent areas in PNGs and SVGs.

Do shadows slow down a website?

Static shadows have a low performance cost. Avoid animating box-shadow directly; for hover effects, animate the opacity of a pseudo-element with a shadow.

Is it really free? Is there a daily limit?

It's free with no daily limits. Processing happens on your device, so there's no per-use cost and no need to limit you.

Does it work on phones?

Yes. The site works in any modern browser on Android, iPhone, Windows, Mac, and Linux—no installation needed.

Related tools

View all — Related tools
CSS Border-Radius Generator Round each corner separately, create elliptical and organic shapes, and copy the CSS with a live preview. CSS Gradient Generator Create linear, radial, and conic gradients with multiple colors, then copy the ready-to-use CSS. Color Converter Convert colors between HEX, RGB, HSL, HSV, and CMYK, and check the WCAG contrast between two colors. CSS, HTML, and JSON Minifier Reduce the size of CSS, HTML, and JSON by removing comments and whitespace without changing how your code works. Create ZIP Combine multiple files of any type into a single compressed .zip file, right in your browser. Extract ZIP Open ZIP files without installing anything. Preview the contents and download only the files you need. JSON Formatter Format, validate, and minify JSON with helpful error highlighting. Encode and decode Base64 Convert text or files to and from Base64.