# CSS Box Shadow Generator

> Visually design CSS box-shadows. Adjust offset, blur, spread, color, and inset. Stack multiple shadows for layered effects. Get the generated CSS instantly.

URL: https://uttir.com/css-box-shadow-generator
Categories: web-tools, color-tools, developer-tools
Privacy: Shadow values are computed in your browser. No upload, no tracking.

## About

Design CSS box-shadows visually. Adjust horizontal and vertical offset, blur, spread, color, and inset. Stack multiple shadows for layered effects (drop shadow + inner highlight + soft glow). The generated CSS is copy-paste ready.

Common uses: card elevation (Material-style), neumorphism, focus rings, hover effects, hero text shadows, image frames. Layering 2-3 shadows gives the most natural-looking results.

## How to use

1. **Adjust the controls** — Move the offset, blur, spread, and color sliders. The preview updates live.
2. **Add layers** — Click "Add shadow" to layer multiple shadows. Each layer can have its own color and offset.
3. **Copy the CSS** — Use the "Copy CSS" button to grab the generated box-shadow value.

## FAQ

### What is the difference between blur and spread?

Blur is the size of the soft falloff. Spread is the size of the solid part of the shadow. A shadow with high blur and zero spread fades quickly; a shadow with high spread and low blur is a hard, large shadow. Most natural-looking shadows use both.

### What is inset?

Inset draws the shadow inside the element instead of outside. Use it for inner highlights, pressed-button effects, or to suggest depth inside a container.

### How do I layer multiple shadows?

Click "Add shadow" to create a second shadow layer. Each layer has its own color, offset, blur, and spread. The first shadow in the list is on top; later shadows are drawn under it. Common combinations: (1) tight dark shadow directly under the element, (2) larger soft shadow for ambient occlusion.

### Why does my shadow look different in the browser?

CSS box-shadow rendering depends on the browser and the device. Chrome, Firefox, and Safari render shadows slightly differently. Test in the target browser before shipping.

### What is neumorphism?

Neumorphism (or "new skeuomorphism") is a design style that uses two box-shadows — one light and one dark — to make elements look like they are extruded from a flat background. The generator supports it: add a light shadow on top and a dark shadow on the bottom with the same blur and offset.

## Related tools

- [CSS Gradient Generator](https://uttir.com/css-gradient-generator) — Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.
- [CSS Flexbox Playground](https://uttir.com/css-flexbox-playground) — Visual playground for CSS Flexbox. Adjust container and item properties with sliders, see the live layout update, and copy the generated CSS.
- [CSS Grid Playground](https://uttir.com/css-grid-playground) — Visual playground for CSS Grid. Define rows, columns, and gaps, place items by area or line number, and copy the generated CSS.
- [CSS Minifier](https://uttir.com/css-minifier) — Shrink CSS by stripping comments, collapsing whitespace, and tightening punctuation. See byte savings live.

---

For the full HTML page with the live tool, visit https://uttir.com/css-box-shadow-generator.
This file is the markdown rendering at https://uttir.com/css-box-shadow-generator.md. See https://uttir.com/llms.txt for a site-wide summary.