CSS Box Shadow Generator
Design one standards-shaped CSS box shadow visually and copy a deterministic declaration without external code generation.
Privacy: your files never leave your device. All processing happens locally in your browser.
How to use
- 1.Adjust horizontal and vertical offsets, blur, spread, color, opacity, and the inset option within the displayed limits.
- 2.Inspect the sample card and read the exact generated declaration below it.
- 3.Copy the CSS into the intended selector and test the real component across themes, sizes, focus states, and browsers.
About CSS Box Shadow Generator
CSS Box Shadow Generator creates one CSS box-shadow declaration while showing the effect on a sample card. Set horizontal and vertical offsets, blur radius, spread radius, a six-digit color, opacity, and optional inset behavior. The preview and serialized code update locally in the browser; no CSS, color choice, or clipboard content is sent to a server.
The output follows the CSS Backgrounds and Borders box-shadow component model. It writes optional inset first, followed by horizontal offset, vertical offset, blur radius, spread radius, and an rgba color. The resulting string can be pasted into a style rule for an element that accepts the box-shadow property.
Horizontal and vertical offsets range from -200 to 200 pixels. Positive horizontal values move an outer shadow to the right, and negative values move it left. Positive vertical values move it downward, and negative values move it upward. For inset shadows, the same offsets affect the perceived inner shadow direction.
Blur ranges from zero to 200 pixels and cannot be negative. Zero produces a hard edge. Larger values soften and expand the visible transition without changing the explicit spread value. Browser rendering can vary slightly with pixel density, transforms, zoom, compositing, and the shape of the element.
Spread ranges from -100 to 100 pixels. Positive spread expands the shadow shape before blur; negative spread contracts it. A sufficiently negative spread can make an outer shadow difficult or impossible to see. Spread is separate from blur, even though both affect the apparent footprint.
The color control uses a six-digit hexadecimal color and converts its red, green, and blue channels to decimal rgba components. Opacity accepts zero through 100 percent and is serialized as an alpha value from 0 through 1, rounded to at most three decimal places. A zero-alpha shadow remains syntactically present but invisible.
Inset changes the shadow from an outer drop shadow to a shadow drawn inside the element’s border edge. It is useful for pressed controls, recessed panels, inner highlights, and depth cues. The generator creates only one shadow layer. CSS supports comma-separated multiple shadows, but combining and ordering layers is intentionally outside this small tool.
The visual sample uses the generated value as an inline style only for the local preview. The copied output is plain text such as box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25);. No style tag, selector, HTML fragment, vendor prefix, or JavaScript is generated.
Modern browsers generally support unprefixed box-shadow. This tool does not add legacy -webkit- or -moz- prefixes, detect browser targets, run an autoprefixer, or test a production stylesheet. It also does not generate text-shadow, filter: drop-shadow(), multiple elevation tokens, Tailwind classes, design-system variables, or animation keyframes.
A dramatic shadow can reduce clarity, make a component look detached, create false hierarchy, or perform poorly over complex backgrounds. Check contrast in light and dark themes, disabled and focus states, high-contrast settings, reduced-transparency preferences where relevant, and actual device rendering. Shadows should reinforce structure rather than carry essential meaning alone.
For reliable use, begin with modest offsets, a blur larger than the offset, zero or small spread, and low opacity. Preview the declaration on a background similar to the destination. Copy the CSS, place it in the intended rule, and inspect the real element at multiple sizes. The generator does not modify project files or remember settings after reload.
Methodology & sources
Validate offsets within ±200 px, blur within 0–200 px, spread within ±100 px, opacity within 0–100%, and a six-digit hex color; normalize negative zero; convert RGB channels to decimal; round alpha to three decimal places; serialize optional inset followed by four pixel lengths and rgba color in deterministic CSS order; render that exact value on a local preview; expose plain declaration text for clipboard copy; embed no browser-support table or multiple-shadow parser.
Frequently asked questions
- What is the difference between blur and spread?
- Spread changes the shadow shape before blurring, while blur controls the softness of its edge.
- Can I create an inner shadow?
- Yes. Enable Inset to place the shadow inside the element’s border edge.
- Does the tool create multiple comma-separated shadows?
- No. It intentionally generates one bounded shadow layer at a time.
- Are vendor prefixes included?
- No. The output uses the current unprefixed CSS property and does not run a browser-targeting or prefixing tool.
Related tools
- CSS Grid GeneratorBuild a bounded CSS Grid with explicit columns, rows, gap, and item alignment, preview it live, and copy standards-based declarations.
- Color Gradient GeneratorBuild linear and radial CSS gradients visually, then copy production-ready code in one click.
- Image Color PickerClick any pixel to grab its exact HEX and RGB color — free, private, and right in your browser.
- Color Contrast CheckerCheck any text/background color pair against WCAG AA and AAA contrast rules in real time.
- ASCII TableLook up every standard 7-bit ASCII code with exact decimal, hexadecimal, octal, and binary values.
- BOM RemoverRemove exactly one leading U+FEFF from pasted decoded text locally while preserving every internal, trailing, or second leading occurrence.