HIFreeTools
ENES

Free CSS Box Shadow Generator

Drag the sliders to design a CSS box-shadow, watch it update on a live preview box, and copy the exact box-shadow declaration with one click.

Live preview
CSS
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);

Quick answer

A CSS box-shadow generator lets you set the horizontal and vertical offset, blur radius, spread radius, color, and opacity of a shadow visually, then gives you the ready-to-paste box-shadow declaration. The color and opacity are combined into an rgba() value, and an inset toggle switches between an outer drop shadow and an inner shadow.

Formula & method

The tool reads your hex color and converts it to red, green, and blue values, then combines them with the opacity slider (0–1) to build an rgba() color. It assembles the five box-shadow lengths in order — horizontal offset, vertical offset, blur radius, spread radius — each in pixels, and prepends the keyword "inset" when the inset toggle is on. The result is the standard CSS syntax box-shadow: [inset] h-offset v-offset blur spread color;. The same string drives both the copyable code and the inline style on the preview box, so what you see is exactly what you copy. Everything runs locally in your browser.

Examples

Example 1: Soft drop shadow
Input
h 4px, v 4px, blur 10px, spread 0px, color #000000, opacity 0.3, inset off
Result
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);
Why
Black at 30% opacity gives a subtle card shadow offset down and to the right.
Example 2: Elevated card with negative spread
Input
h 0px, v 8px, blur 24px, spread -4px, color #0a0a0a, opacity 0.25, inset off
Result
box-shadow: 0px 8px 24px -4px rgba(10, 10, 10, 0.25);
Why
The negative spread (-4px) shrinks the shadow so it stays tucked under the element for a floating look.
Example 3: Inner (inset) shadow
Input
h 0px, v 2px, blur 6px, spread 0px, color #1e3a8a, opacity 0.5, inset on
Result
box-shadow: inset 0px 2px 6px 0px rgba(30, 58, 138, 0.5);
Why
The inset keyword draws the shadow inside the box; #1e3a8a converts to rgb(30, 58, 138) for a pressed-in indigo effect.

When to use this tool

  • Designing buttons, cards, modals, or dropdowns that need depth and elevation.
  • Matching a shadow from a design mockup by tweaking offset, blur, and opacity until the preview lines up.
  • Generating an inset shadow for pressed buttons, input wells, or inner glow effects.
  • Learning how the five box-shadow values interact without repeatedly editing CSS and reloading the page.

Common mistakes

  • Confusing blur and spread. Blur softens the edge of the shadow, while spread grows or shrinks the whole shadow before blurring — a negative spread pulls it in.
  • Forgetting that opacity lives inside rgba(), not as a separate CSS property. The generator bakes your opacity slider into the alpha channel of the color.
  • Expecting inset to push the box outward. Inset draws the shadow inside the element, which is the opposite of a normal drop shadow.
  • Leaving blur at 0 with a large spread, which produces a hard-edged solid block instead of a soft shadow.
  • Assuming a shadow adds to the element's size. box-shadow is painted outside the box and never affects layout or the space the element occupies.

Frequently asked questions

What do the four box-shadow numbers mean?

In order they are horizontal offset, vertical offset, blur radius, and spread radius, all in pixels. Positive horizontal moves the shadow right, positive vertical moves it down, blur softens the edge, and spread grows (positive) or shrinks (negative) the shadow.

How is the rgba color built from my color and opacity?

Your hex color is split into red, green, and blue values (0–255), and the opacity slider becomes the alpha channel from 0 (fully transparent) to 1 (fully opaque). For example #000000 at opacity 0.3 becomes rgba(0, 0, 0, 0.3).

What does the inset option do?

Inset draws the shadow inside the element instead of outside it, creating a recessed or pressed-in look. The generator simply adds the inset keyword to the front of the declaration.

Can an element have more than one box-shadow?

Yes. CSS lets you stack shadows by separating them with commas, like box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.15);. This tool builds one shadow at a time, which you can combine manually for layered effects.

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

No. A box-shadow is painted outside the normal box and does not affect layout, so surrounding elements are not pushed away. If you need a border that takes up space, use border or outline instead.

Is box-shadow supported in all browsers?

Yes. box-shadow is part of the CSS Backgrounds and Borders specification and is supported in every modern browser, including Chrome, Firefox, Safari, and Edge, with no vendor prefix needed.

Is my data sent anywhere?

No. The generator runs entirely in your browser, so your colors and settings never leave your device and there is no upload.

Sources & references

External references open in a new tab. We are independent and not affiliated with these organizations.

  • ✓ Free to use
  • ✓ No sign-up required
  • ✓ Runs entirely in your browser — nothing is uploaded.
  • ✓ Formula and method shown above
Last updated: How we calculateReport a correctionDisclaimer

Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.

Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.

Related tools

Embed this tool on your site

Free to embed, no sign-up. Paste this code where you want the css box shadow generator to appear: