Box Shadow Generator — Free CSS & Tailwind Tool

Use this free box shadow generator to build CSS box-shadow values visually — adjust offset, blur, spread, and color, then copy the code straight into your stylesheet.

box-shadow: 10px 10px 20px 0px rgba(15,13,114,0.35);

shadow-[10px_10px_20px_0px_rgba(15,13,114,0.35)]

What Is the CSS box-shadow Property?

box-shadow adds a shadow effect around an element’s border box using six values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword.

Each value controls a different part of the effect:

• Horizontal offset (x) — moves the shadow left (negative) or right (positive)
• Vertical offset (y) — moves the shadow up (negative) or down (positive)
• Blur radius — how soft the shadow’s edge is; 0 gives a hard-edged shadow
• Spread radius — grows or shrinks the shadow beyond the element’s size
• Color — usually set with an alpha channel (rgba) so the shadow can be semi-transparent
• Inset — flips the shadow to render inside the element instead of outside it

A typical declaration looks like this:

css

box-shadow: 10px 10px 20px 0px rgba(15,13,114,0.35);

How to Use the Generator

1. Adjust the offset, blur, spread, color, and opacity sliders until the preview looks right
2. Toggle the preview background between light and dark — a shadow that looks fine on white can disappear or look wrong on a dark surface
3. Switch to the CSS or Tailwind tab and copy the generated code
4. Paste it into your stylesheet, theme’s custom CSS panel, or utility class

Adding Multiple Box-Shadows to One Element

box-shadow accepts a comma-separated list of shadow definitions, and the browser renders them stacked in order — the first shadow listed sits on top.

This is how effects like neumorphism work: one light shadow offset toward the light source, one dark shadow offset away from it, layered on the same element. The generator’s layer system lets you build and preview this directly — add a layer, adjust it independently, and the output panel combines every layer into one valid box-shadow declaration automatically.

css

box-shadow:
  8px 8px 16px 0px rgba(163,163,184,0.45),
  -8px -8px 16px 0px rgba(255,255,255,0.8);

Box-Shadow in Tailwind CSS

Tailwind ships default shadow utilities (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner), but these come from a fixed design-token scale — they won’t match a specific offset, blur, or color you’ve dialed in visually.

For an exact match, Tailwind supports arbitrary value syntax: wrap a full shadow value in shadow-[...] and replace spaces with underscores. This generator’s Tailwind tab outputs that format directly, so a custom shadow drops straight into a class attribute with no manual conversion:

html

<div class="shadow-[10px_10px_20px_0px_rgba(15,13,114,0.35)]"></div>

Multiple layered shadows work the same way — separate each layer with a comma inside the brackets, no spaces around the comma.

Adding Custom CSS to a WordPress Site

Once you have a shadow value, there are a few standard places to add it depending on how the site is built:

• Full Site Editing / block themes — Appearance → Editor → Styles → Additional CSS, or per-block “Additional CSS class(es)” in block settings paired with a stylesheet rule
• Classic themes — Appearance → Customize → Additional CSS
• Page builders — Elementor and Divi both expose a custom CSS field at the element, section, or global level
• Child theme — add the rule to style.css if you’re maintaining a child theme, which avoids losing changes on theme updates

Test any custom shadow in both light and dark-mode-aware themes before publishing — some themes invert card or button backgrounds, and a shadow tuned for a white card can look wrong once the background flips.

Browser Support

box-shadow is supported in every modern browser (Chrome, Firefox, Safari, Edge) with no vendor prefixes required. It has been standard since CSS3 and there’s no meaningful compatibility risk in current production use.

FAQ

What is the CSS box-shadow property?
box-shadow is a CSS property that draws a shadow around an element’s box using offset, blur, spread, and color values, with an optional inset keyword to render the shadow inside the element instead of around it.

How do you add multiple box-shadows to one element?
List each shadow’s values separated by a comma inside a single box-shadow declaration; the browser layers them with the first one listed rendered on top, which is how effects like neumorphism are built from two shadows on one element.

Does Tailwind CSS have a box-shadow generator, and how do you use custom shadow values in Tailwind?
Tailwind doesn’t ship a generator, but it supports custom shadows through arbitrary value syntax — shadow-[value] — with spaces in the value replaced by underscores; this tool’s Tailwind tab outputs that exact format so it can be pasted straight into a class attribute.

Can you use box-shadow on an SVG element?
box-shadow doesn’t apply to SVG shapes the way it does to HTML boxes, since SVG elements aren’t rendered with a CSS box model in the same sense; the CSS equivalent for SVG (and any element where you want the shadow to follow non-rectangular edges) is filter: drop-shadow(x y blur color), which follows the actual shape rather than its bounding box.

Where do I add custom CSS like this in WordPress?
Most themes support Appearance → Customize → Additional CSS, or in block themes, Appearance → Editor → Styles → Additional CSS; page builders like Elementor and Divi also have their own custom CSS fields at the element or global level.