Box Shadow CSS Generator
Blur radius changes, color changes, shadow size — everything you need to craft a great drop shadow in one place. Drag the sliders and watch the preview react instantly, click a ready-made example to copy its code, or scroll down to learn exactly how box-shadow works under the hood.
Shadow settings
Ready-made examples — click any card to copy its CSS
Eight shadows you can ship today. Clicking a card copies the full declaration to your clipboard and loads it into the preview above so you can keep tweaking it with the sliders.
The CSS you need to build this yourself
This generator writes one property, but understanding why the output looks right takes a few fundamentals. Work through these lessons on our learning path — in this order — and you'll be able to write shadows by hand:
Top 10 related generators
If you're working with shadows, these tools sit next door in most projects:
- Text Shadow GeneratorThe same idea, applied to type
- Neon Text GeneratorStacked glowing shadows
- Layer StylesShadow + gradient + border in one
- Border Radius GeneratorThe corners your shadow follows
- Gradient GeneratorBackgrounds worth shadowing
- GlassmorphismFrosted panels need soft shadows
- Button StylerShadows make buttons clickable
- Hover EffectsAnimate the lift on hover
- Cubic Bezier EditorTune the shadow transition curve
- Pattern GeneratorTextured surfaces under your cards
How box-shadow works
The box-shadow property paints a shadow shaped exactly like the element's box — including its border-radius — either behind the element (outline mode) or inside it (inset mode). One declaration takes up to six pieces of information:
selector { box-shadow: [inset] offset-x offset-y blur spread color; }
| Value | What it does | Notes |
|---|---|---|
offset-x | Moves the shadow right (+) or left (−) | Required |
offset-y | Moves the shadow down (+) or up (−) | Required |
blur | Softens the edge; 0 = razor sharp | Cannot be negative |
spread | Grows (+) or shrinks (−) the shadow | Negative = tighter than the box |
color | Shadow color, usually transparent black | Use rgba() for realism |
inset | Draws the shadow inside the box | For pressed / carved looks |
Why the generator writes rgba()
A solid black shadow looks like a sticker. Real light produces shadows that let the background bleed through, which is exactly what the alpha channel in rgba(32, 36, 42, 0.35) does. That's why the opacity slider above edits the color's alpha rather than the whole element's opacity — the box stays fully visible while only the shadow turns translucent.
Why we still include -webkit- and -moz- prefixes
Every modern browser has supported unprefixed box-shadow for over a decade, so the plain declaration is all you strictly need. The prefixed lines exist only for legacy traffic (old Android WebViews, ancient Firefox), cost nothing, and are ignored by modern engines — so the generator includes them for maximum compatibility, exactly like the original CSSmatic did.
Stacking multiple shadows
One declaration can hold several shadows separated by commas; the first paints on top. Layering a tight dark "contact" shadow with a wide soft "ambient" one is how design systems achieve that expensive sense of depth — the Layered depth example above does exactly this. Ready to build your own combinations? The Layer Styles tool automates it.
Run the code — try it yourself
The editor below is fully live. Your task: the button is flat. Give it a floating shadow on hover by adding a box-shadow to the .btn:hover rule (tip: steal the "Floating hover" example above). Press Run Code — or Ctrl/Cmd + Enter — then hover the button in the preview.
Frequently asked questions
Is this box shadow generator free to use?
Yes — completely free, no account, no watermark, no limit. CSSmatic is a non-profit project made by developers for developers, and every line of CSS you copy from this page is yours to use in personal or commercial projects.
Which browsers support box-shadow?
All of them, and they have for years: Chrome, Firefox, Safari, Edge, Opera and every modern mobile browser support unprefixed box-shadow. The -webkit- and -moz- lines in the output only matter for very old browsers and are safely ignored everywhere else.
What's the difference between blur and spread?
Blur softens the shadow's edge — higher values fade it out over a longer distance without making the shadow bigger overall. Spread resizes the shadow itself before blurring: positive values grow it beyond the element, negative values shrink it tighter than the element. The popular "floating card" look combines a big blur with a negative spread so the shadow stays under the card instead of leaking sideways.
Can I animate a box-shadow?
Yes — box-shadow is transitionable, and animating it on hover is a classic effect (that's the exercise above). One caveat: animating shadows forces the browser to repaint, which can stutter on low-end devices. For silky performance, animate opacity on a pseudo-element that carries the shadow instead. Our Performance lesson covers this pattern in depth.
Why does my shadow get clipped or not show at all?
Two usual suspects. First, an ancestor with overflow: hidden will clip any shadow that extends past it — give the parent breathing room or move the overflow rule. Second, shadows don't render on elements with display: inline; switch to inline-block or block. And remember a shadow with 0 opacity, or the same color as the background, is technically there — just invisible.
box-shadow vs. drop-shadow — which should I use?
box-shadow shadows the rectangular border box. filter: drop-shadow() shadows the visible pixels — perfect for transparent PNGs and clipped shapes, and it's hardware-accelerated. Use box-shadow for cards, buttons and panels; use drop-shadow() for irregular images and icons. It also can't do inset or spread.
How many shadows can I stack on one element?
There's no meaningful limit — comma-separate as many as you like, and the first one in the list paints on top. Practical designs rarely need more than three or four layers; famous "smooth shadow" recipes use six to eight increasingly blurred layers to imitate real light falloff.
Master the shadow, then move on
A good shadow is the cheapest realism you can add to an interface: one property, zero images, instant depth. The habit worth building is restraint — low offsets, generous blur, translucent color — because the best shadows are the ones users feel rather than see. Bookmark this page for the sliders, but aim to reach the point where you can type 0 4px 12px rgba(0,0,0,.12) from muscle memory.
When you're comfortable here, the natural next steps are the Shadows lesson for the full theory, the Text Shadow generator to apply the same thinking to type, and the Transitions lesson so your shadows respond gracefully to hover and focus. Everything on CSSmatic — every lesson and every tool — is free and interlinked, so wherever you go next, the path continues.
CSSmatic is a non-profit project, made by developers for developers. Found a bug or want to collaborate? Contact us.