What is the simplest box shadow I can write in CSS?

The simplest box shadow uses two required lengths and a color, such as box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2). This creates a centered, softly blurred shadow with no spread.

Can I have more than one box shadow on the same element?

Yes. Separate multiple shadow declarations with commas inside one box-shadow value, and the browser will paint them in source order with the first shadow on top.

What does the inset keyword do in a box shadow?

The inset keyword flips the shadow from outside the element to inside the border box. It is the only keyword parameter and can be added or removed without changing the other values.

Are negative values allowed in box shadow?

Yes for the horizontal and vertical offsets, which move the shadow in the opposite direction, and for the spread radius, which shrinks the shadow footprint. Negative blur is not allowed and is clamped to zero by the browser.

Do I need vendor prefixes for box shadow today?

Modern browsers support the unprefixed box-shadow property, so a single unprefixed declaration is enough for current projects. Prefixes are only needed if you still target very old browser builds.

How can I make the same shadow work in light and dark themes?

Generate one shadow tuned for a light background and a second tuned for a dark background, then scope each box-shadow rule with a theme-aware selector. Because the output is deterministic, both versions can be stored as named values and swapped per theme.

How to Get a Box Shadow in CSS with a Visual Generator

A CSS box shadow is produced by the box-shadow property, which takes the form box-shadow: offset-x offset-y blur-radius spread-radius color, with an optional inset keyword that flips the shadow from outside the element to inside it. The MDN reference lists those six values as the complete parameter set, and the same source notes that any omitted length defaults to zero while color defaults to the current text color. Because every value is a length or color, identical numeric inputs always generate an identical declaration, which is what makes a visual generator reliable: the string you copy is the exact string the browser will parse.

Designing a shadow by typing values into a blank stylesheet works, but it slows you down. You cannot see the result until you save, reload, and inspect, and small mistakes such as swapping blur and spread silently change the look. A purpose-built visual generator keeps every control on screen at once and updates the sample card and declaration in real time. The CSS Box Shadow Generator follows that pattern: it constrains inputs to valid ranges, shows the rendered result next to the controls, and exposes a copy-ready declaration that mirrors what you see. If you want the fastest path from idea to working code, open the CSS Box Shadow Generator and treat the on-screen card as the source of truth.

What the CSS Box Shadow Property Accepts

The CSS box-shadow property accepts up to six pieces of information in a single declaration. The first two are required lengths: a horizontal offset and a vertical offset, each in any CSS length unit such as px, rem, or em. Positive offsets move the shadow right and down; negative offsets move it left and up. The third value is a blur radius, which softens the shadow edge. The fourth value is a spread radius, which expands or contracts the shadow size independent of blur. The fifth is a color, which may be any valid CSS color format including hex, rgb(), rgba(), hsl(), and named colors. The sixth is the optional inset keyword, which moves the shadow inside the element's border box instead of outside it.

Parameter	Required	Accepts	Effect
Horizontal offset	Yes	Length (px, rem, em)	Shifts the shadow left or right
Vertical offset	Yes	Length (px, rem, em)	Shifts the shadow up or down
Blur radius	No	Length (zero or positive)	Softens the shadow edge
Spread radius	No	Length (positive or negative)	Grows or shrinks the shadow area
Color	No	Any valid CSS color	Sets the shadow tint
inset	No	Keyword	Draws the shadow inside the element

Per the CSS Backgrounds and Borders specification maintained on the W3C site, these parameters can also be combined across a comma-separated list to layer multiple shadows on a single element, with the first shadow rendered on top.

How to Get a Box Shadow in CSS Using the Generator

Open the CSS Box Shadow Generator in your browser. The sample card and the live declaration appear together so you can compare them at every step.
Set the horizontal offset to move the shadow left or right, and set the vertical offset to move it up or down. Stay within the displayed range to avoid values the browser will clip or reject.
Adjust the blur radius to control edge softness, then adjust the spread radius to grow or shrink the shadow footprint. A spread of zero keeps the shadow the size of the element; a positive spread pads it outward; a negative spread tucks it inward.
Pick a color using the picker or paste a hex, rgb(), or hsl() value. Use the opacity control to dial transparency without losing the base color, which keeps the same hue across themes.
Toggle the inset option to flip the shadow from outside the element to inside it. This is the only keyword parameter and it is safe to add or remove without changing the rest of the declaration.
Read the generated declaration below the sample card. The string updates as you change any control, so what you see is exactly what the browser will parse.
Copy the declaration into the CSS rule that targets your component, then test the real component across themes, sizes, focus states, and browsers.

Reading and Copying the Generated Declaration

The generator's output is the full box-shadow value, including the inset keyword when the inset option is enabled. A typical declaration looks like box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);, where the four length values appear in the offset-x, offset-y, blur-radius, spread-radius order. When you copy, paste the value directly after the property name and a colon in your selector, for example .card { box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); }. The browser parses the declaration left to right and resolves each length against the element's coordinate system, so the order matters and the units are not interchangeable in older syntax.

Because the generator stays inside its declared limits, every output is a standards-shaped declaration. That means you can paste it into any modern stylesheet without wrapping it in vendor prefixes; current browser support covers box-shadow as a single unprefixed property across all major engines. If you maintain a legacy stylesheet that still targets older WebKit or Gecko builds, you can keep the prefixed versions as fallbacks and let the unprefixed rule override them in newer browsers.

Tuning Each Control for a Realistic Shadow

Start with the offsets. A neutral elevation feel comes from equal horizontal and vertical offsets, while a directional light source feel comes from a larger vertical offset than horizontal. The vertical offset is the strongest signal of depth because it pairs with the shadow color to suggest a light source above and behind the card. For most UI elevations, vertical offsets between 2px and 12px read well at default zoom.

Next, set the blur. Blur softens the edge so the shadow looks like it is cast on a surface rather than printed onto the element. Higher blur values increase the perceived distance between the element and the surface. Spread controls the footprint: a positive spread grows the shadow past the element's box; a negative spread pulls it in. For card-style components, a spread of zero with a moderate blur tends to look cleanest.

Color choice carries most of the shadow's mood. A neutral dark color with low opacity reads as a subtle elevation, while a saturated hue can act as a glow. Keep opacity low for ambient shadows and raise it only when you want a deliberate halo. If you want a quick reference for the parameter shape that the generator produces, the MDN entry on box-shadow lists the same six values and shows how multiple shadows combine with commas.

Layering Multiple Shadows on One Element

CSS allows more than one shadow per element by separating declarations with commas. The browser paints them in source order, with the first shadow on top of the others. A common technique is a tight, dark shadow close to the element paired with a soft, light shadow farther away, which mimics real-world ambient and key lighting. The generator's declared limits cover a single shadow at a time, so when you want two layers, generate the first declaration, copy it, then adjust the controls to produce the second shadow and copy that too. Paste both into the same box-shadow value, separated by a comma, in the order you want them stacked.

Two-shadow declarations are especially useful for raised cards, modals, and popovers. The first shadow provides a sharp, close contact line; the second provides the softer ambient falloff. The result reads as physical depth rather than a single flat drop. Keep both colors in the same family so the layered effect feels intentional rather than mismatched.

Testing the Shadow Across Browsers, Themes, and States

After pasting the declaration into your stylesheet, verify the result in the actual component rather than the generator's preview. The preview uses the same property the browser will parse, so the visual match should be close, but your component may sit on a different background, sit inside a different container width, or interact with neighboring elements that change the perceived contrast. Open the page on at least one Chromium-based browser and one WebKit-based browser, and check at narrow and wide viewport widths.

Theme support matters when you use a colored shadow. A dark theme typically needs a softer, lower-opacity shadow than a light theme, and a high-contrast theme may need a shadow that is barely visible at all. If your project supports both, regenerate the shadow for each theme or scope the rule with a theme-aware selector. The declaration is deterministic, so the same generator inputs always produce the same string and you can store both theme variants as named values.

Focus and hover states also change how a shadow should feel. A common pattern is to grow the blur and vertical offset slightly on hover to suggest the element lifting, then shrink them on focus-visible to draw the keyboard outline without overpowering the shadow. Because the generator output is a single box-shadow value, you can swap it inside a :hover or :focus-visible rule without touching the rest of the component's CSS.

Common Pitfalls and How the Generator Helps Avoid Them

One common mistake is using a negative blur value, which the CSS specification clamps to zero. The generator's blur control is bounded, so this mistake simply cannot happen in the output. Another pitfall is omitting the unit on zero lengths; 0 without a unit is valid CSS, but mixing unitless and unit-bearing lengths in the same declaration can confuse hand-written code. The generator always emits consistent units, so the copied string is safe to paste verbatim.

A third pitfall is using a named color that does not match the rest of the palette. The picker in the generator shows the chosen color next to the sample card, so the result is visible before you copy. Finally, do not rely on box-shadow for accessibility-critical emphasis: per the W3C's CSS Backgrounds and Borders guidance, shadows are decorative, and the same effect can be reinforced with a visible border or focus ring so users with low contrast vision still see the component's state. If you build a related component such as a button, the CSS Button Generator pairs well with this workflow because it coordinates the shadow with the button's color, border, and radius in one place.

Putting It Together

The path from blank stylesheet to working shadow is short: tune the six parameters inside the generator, read the declaration, copy it, and paste it into the selector that targets your component. The generator constrains inputs to valid ranges, so what you see is what the browser will render, and what you copy is what the browser will parse. Once the rule is in place, test the real component across themes, sizes, focus states, and browsers to confirm the shadow holds up in context. The same approach works whether you are styling a single card, a popover, or an entire design system, and the deterministic output keeps your values reproducible across components and teammates.