What does the CSS box-shadow property do?

The box-shadow property adds shadow effects around an element's frame. It takes horizontal and vertical offsets, a blur radius, an optional spread radius, and a color, letting you create anything from a subtle lift to a dramatic glow, and it can be placed outside the element or inset within it.

What is the difference between blur and spread?

Blur radius softens the shadow's edge — a higher blur makes it more diffuse and gentle. Spread radius changes the shadow's size before blurring — a positive spread enlarges the shadow, a negative one shrinks it. Together they control how tight or expansive the effect looks.

What is an inset shadow?

An inset shadow is drawn inside the element rather than outside it, making the element appear pressed in or hollowed out. It is commonly used for input fields, pressed buttons, and subtle inner depth, and this tool lets you toggle it on with one checkbox.

How do I make a soft, modern shadow?

Modern UI shadows are subtle: use small offsets, a generous blur, little or no spread, and a low-opacity dark color — often black at around 10-20% opacity. This produces the gentle, realistic lift seen in contemporary card designs rather than a harsh dark blob.

Can I layer multiple shadows?

CSS allows multiple comma-separated shadows on one element for rich, layered depth. This generator focuses on crafting a single clean shadow perfectly; you can combine several generated values in your stylesheet by separating them with commas.

Is the generated CSS cross-browser compatible?

Yes. The standard box-shadow property is supported by every modern browser without vendor prefixes, so the code you copy works everywhere your visitors browse.

CSS Box Shadow Generator

Remove Ads

Horizontal offset: 10px

Vertical offset: 10px

Blur radius: 15px

Spread radius: 0px

Shadow color

Opacity: 30%

Inset (inner shadow)

Preview

CSS

Remove Ads

CSS Box Shadow Generator — Design Perfect Shadows Visually

Shadows are what give a flat web page a sense of depth, hierarchy and polish, but writing the CSS by hand is a frustrating loop of typing numbers, saving, reloading and squinting. This free visual generator replaces that loop with instant feedback: drag sliders for offset, blur, spread and opacity, pick a color, and watch the shadow update live on a preview element. When it looks right, copy the clean, cross-browser CSS. There is no signup, nothing to install, and everything runs in your browser, so you can dial in a professional shadow in under a minute.

Understanding the box-shadow Property

The CSS box-shadow property is more capable than most people realize. Its syntax is: horizontal offset, vertical offset, blur radius, spread radius, and color — with an optional inset keyword. Each value plays a distinct role, and understanding them turns shadow design from guesswork into intention:

Value	What it controls
Horizontal offset	How far left or right the shadow sits (negative moves it left)
Vertical offset	How far up or down the shadow sits (negative moves it up)
Blur radius	How soft or sharp the shadow edge is; higher is softer
Spread radius	How much larger or smaller the shadow is than the element
Color & opacity	The shadow's hue and how strong or faint it appears
Inset	Draws the shadow inside the element instead of outside

The Secret to Shadows That Look Professional

The difference between an amateur shadow and a polished one is almost always subtlety and light direction. Real objects are lit from above, so their shadows fall below — which is why the most natural web shadows use little or no horizontal offset and a small positive vertical offset. The shadow color should rarely be pure, fully-opaque black; that reads as a harsh smudge. Instead, use black (or a dark tone that matches your background) at a low opacity, around 10 to 25 percent, combined with a generous blur. This produces the soft, believable lift you see on well-designed cards, modals and buttons. This tool exposes opacity as its own control precisely because getting it right is the key to a convincing result.

Common Shadow Recipes

Subtle card lift: zero horizontal offset, a few pixels of vertical offset, a large blur, no spread, and black at roughly 10% opacity. The classic modern card shadow.
Floating / elevated element: a larger vertical offset and blur with slightly higher opacity, suggesting the element sits well above the page.
Tight, crisp shadow: small offsets, low blur, and a touch of opacity for a defined, material-style edge.
Inner shadow (inset): enable inset with a soft blur and low opacity to make inputs or pressed buttons look recessed.
Glow effect: zero offsets, a moderate blur and spread, and a bright color at medium opacity to create a halo around the element.

Inset Shadows and When to Use Them

The inset keyword flips the shadow inward, and it unlocks a whole category of effects. Applied to a text input with a soft dark inner shadow, it makes the field look genuinely recessed, inviting input. On a button, switching from an outer shadow to an inset one on click creates a satisfying "pressed" feel. Inset shadows are also useful for subtle inner borders and for suggesting that content sits below a surface. Because this generator lets you toggle inset while keeping all your other values, you can compare the outer and inner versions of the same shadow instantly and choose whichever communicates the right physical metaphor.

Why a Live Preview Changes Everything

Shadow values interact in ways that are genuinely hard to predict from numbers alone. A blur of 20 looks completely different at 5% opacity than at 40%; a spread of 10 can either enhance or ruin a shadow depending on the blur. Reading those relationships from raw CSS is nearly impossible, which is why designers historically tweaked, reloaded, and tweaked again. Seeing the shadow render in real time as you move each slider collapses that cycle to nothing — you develop an intuitive feel for how the values combine, and you arrive at a result you actually like rather than settling for the first thing that compiles.

Clean, Cross-Browser Output

The CSS this tool produces uses the standard box-shadow property, which every modern browser supports without vendor prefixes. You can paste it directly into a stylesheet, a CSS-in-JS block, or an inline style. If you want layered depth, generate several shadows and combine them in one declaration separated by commas — a technique used for the most sophisticated material designs. However you use it, the output is production-ready and will render consistently for your visitors.

Free, Instant, and Endlessly Reusable

Design as many shadows as you need at no cost and with no account. Because it runs entirely in your browser, it is fast and private. Shadows are a small detail that disproportionately affects how finished and trustworthy an interface feels, and getting them right takes seconds here instead of a frustrating trial-and-error session in your editor. Pair this with our Border Radius Generator, CSS Gradient Generator and Color Palette Generator to assemble a cohesive, modern visual style for your entire project.