CSS Box-Shadow Generator

Design CSS box-shadows visually and copy the code in one click.

#1F2328
Generated CSS
Propertybox-shadow
Value6px 6px 12px 0px rgba(31, 35, 40, 0.35)
box-shadow: 6px 6px 12px 0px rgba(31, 35, 40, 0.35);CSS rule

This generator runs entirely in your browser — your settings never leave your device.

Free to use — premium coming soon

FREE
  • Unlimited use
  • Instant results
  • 100% private
PREMIUM
  • Remove ads
  • Saved presets & bulk export

About the CSS Box-Shadow Generator

The CSS Box-Shadow Generator lets you build a working box-shadow visually and copy the exact declaration into your stylesheet. Instead of guessing pixel values and reloading the browser, you drag sliders or type numbers for horizontal offset, vertical offset, blur, and spread, pick a color and alpha, toggle inset, and watch a live preview update. The property follows the order offset-x, offset-y, blur-radius, spread-radius, then color, with inset as an optional keyword. Only the two offsets are required; everything after is optional. The generator outputs valid CSS you can paste directly, so you skip the trial-and-error of hand-tuning four interacting length values.

Reach for this tool whenever an element needs to look raised, recessed, or separated from its background: cards, buttons, modals, dropdowns, tooltips, focus rings, and image frames. Because box-shadow never affects layout or an element's computed size, you can add, remove, or animate it without triggering reflow or shifting neighboring elements, which makes it ideal for hover and focus states. A common trick is using zero blur with a positive spread (for example, 0 0 0 3px) to draw a crisp border-like ring that, unlike a real border, does not change the box dimensions. The generator makes these patterns one click away.

Under the hood, each value plays a distinct role. Positive offset-x pushes the shadow right and positive offset-y pushes it down; negative values move it left and up. Blur-radius softens the edge, growing larger and lighter as the number rises, and it cannot be negative. Spread-radius expands the shadow when positive and contracts it when negative, before the blur is applied. The color accepts any CSS color and defaults to the element's currentColor if omitted; using rgba or hsla with a low alpha (roughly 0.1 to 0.25) gives the most natural result. Adding the inset keyword flips the shadow inward so the element looks pressed in. You can stack several comma-separated shadows in one declaration, with the first listed shadow painted on top.

This generator runs entirely in your browser. The values you enter and the CSS it produces are never uploaded to a server, so there is nothing to store or transmit and no account required. The output is standard CSS supported by every modern browser, so the declaration you copy will render identically wherever you paste it. The preview is an honest rendering of the same property your browser applies, meaning what you see in the tool is exactly what you will get in production, with no proprietary syntax or vendor lock-in.

Frequently asked questions

What is the correct order of values in box-shadow?

The order is offset-x, offset-y, blur-radius, spread-radius, then color, with an optional inset keyword. Only offset-x and offset-y are required; blur and spread default to 0 if left out, and color defaults to the element's currentColor.

What is the difference between blur and spread?

Blur softens the shadow's edge so it fades gradually, while spread changes the shadow's size before blur is applied. A positive spread makes the shadow larger than the element and a negative spread shrinks it, whereas blur only controls how diffuse the edge looks.

How do I create multiple layered shadows?

Separate each shadow with a comma in a single box-shadow declaration, for example a small sharp shadow plus a larger soft one. The first shadow in the list is painted on top, and two or three layers at different blur values and opacities give a more realistic sense of depth than one shadow.

What does the inset keyword do?

Adding inset turns an outer drop shadow into an inner shadow, making the element look recessed or pressed into the page. Inset shadows are clipped to the element's padding box and sit above the background but below the content.

Does box-shadow change an element's size or layout?

No. A box-shadow is purely a paint effect and never alters the element's dimensions, push neighboring elements, or trigger scrolling. That is why it is safer to animate than width or border and why a spread-only shadow is a popular border alternative that avoids layout shift.

From our blog

JSON to XML: When You Still Need XML and How the Mapping Works

By the Super Simple Digital Tools Team · Updated June 2026

JSON won the web. It is lighter, easier to read, and native to JavaScript, so almost every modern REST API speaks it by default. Yet XML never went away, and a working developer still bumps into it constantly. SOAP web services are built on XML envelopes, and large swaths of finance, healthcare, telecom, and government infrastructure run on SOAP. RSS and Atom feeds, podcast feeds, and XML sitemaps are XML by specification, an RSS document must conform to the XML 1.0 standard. Build tools like Maven, configuration for Spring and many Java frameworks, and the Office Open XML behind .docx and .xlsx files are all XML too. If your data starts as JSON but has to travel into one of these systems, you need a clean conversion rather than a rewrite.

Conceptually the two formats agree: both describe a hierarchical tree of named values. The differences are in syntax and in a handful of features each format has that the other lacks. JSON gives you typed values, strings, numbers, booleans, null, plus arrays and objects. XML gives you elements, attributes, namespaces, comments, and processing instructions, but it treats every value as text. A faithful converter has to bridge that gap, and most of the friction in JSON to XML comes from the things XML has that JSON does not, attributes and namespaces, and the things JSON has that XML does not, real arrays and real data types.

The core mapping is simple to picture. The whole document gets a single root element, because XML allows exactly one root while JSON can start with an object or an array. Each object key becomes an element name and its value becomes the element body. Nested objects become nested elements, so {"order":{"id":5}} turns into an order element containing an id element. Arrays expand into repeated sibling elements with the same tag, the only sensible way to express a list in XML. Scalar values are written as the text content of their element, and because the type information is gone, a consumer reading the XML back has to know from context or from a schema that a given field is a number rather than a string.

A few details trip people up. XML reserves &, <, and > for its own markup, so any of those characters appearing inside a JSON value must be escaped to &amp;, &lt;, and &gt; or the output will not parse. Element names are also constrained: they cannot begin with a digit and cannot contain spaces or most punctuation, so a JSON key like "2024-total" or "line items" has to be sanitised, commonly by prefixing an underscore for leading digits and replacing spaces with underscores. Empty objects, deeply nested arrays, and keys that differ only by case are other corners worth checking. Because of all this, JSON and XML are not a perfect round trip, converting JSON to XML and back can subtly change types or names.

The safe workflow is to convert, then verify. Generate the XML, eyeball the structure, and if you have a target schema, validate the output against the XSD or DTD that the receiving system publishes. If the target expects certain values as attributes rather than child elements, restructure your JSON first using an attribute convention the converter understands, rather than hand-editing the XML afterward. For SOAP, wrap the converted body in the correct envelope and namespaces the service requires. Treat the converter as a fast first draft of the document shape, and let your schema, not your eyes, be the final judge of correctness.

  • Wrap your JSON in a single top-level object before converting; XML needs exactly one root element, so a bare top-level array will be wrapped automatically and the tag name may not be what you expect.
  • Remember that arrays become repeated sibling elements, not a wrapper plus children, so use a singular, descriptive key name for array items to keep the XML readable.
  • If the receiving schema requires data types, add type attributes (for example type="number") yourself, because XML loses JSON's number, boolean, and null distinctions in plain conversion.
  • Rename any JSON keys that start with a digit or contain spaces before converting, so the element names are predictable instead of being silently underscored by the sanitiser.

Read the full guide →

Tool by the Super Simple Digital Tools Team. Reviewed by our editorial team. Free to use, no signup required.

Related tools