dark
Hand-Picked Top-Read Stories
Trending Tags

Free CSS Box Shadow Generator — Build Beautiful Shadows Online

Design stunning CSS box shadows in real time with our free, browser-based box shadow generator. Adjust X and Y offset, blur radius, spread, colour, and opacity using intuitive sliders — watch the shadow update on a live preview box as you drag. Stack up to five independent shadow layers to create depth, glows, inner shadows, and multi-dimensional effects. When you’re happy with the result, copy the complete box-shadow CSS value or a full CSS rule block with one click.

No registration, no ads, no limits. Twelve hand-crafted presets get you started instantly — from a barely-there soft lift to a bold retro hard shadow — and you can customise any of them as a starting point.

Loading tool…

Why Use a CSS Box Shadow Generator?

Box shadows are one of CSS’s most powerful and versatile visual tools. A single box-shadow property can suggest elevation, add depth to a flat layout, create glowing brand accents, or simulate physical embossing — but getting the values right by hand means editing code, switching to a browser, refreshing, and repeating until the result feels correct. That loop adds up fast.

A visual box shadow generator eliminates the cycle entirely. You see the exact output while you adjust it, which means you discover better values faster and spend zero time guessing. The multi-layer capability is particularly valuable: real-world design systems often combine a close, sharp shadow for the immediate edge and a larger, soft shadow for the ambient lift — the combination reads as far more realistic than a single shadow. Designing that by hand without a preview is painful; here you simply add a second layer and slide.

The preset library is also a productivity shortcut. Starting from a proven shadow like “Floating” or “Card” and tweaking one or two values to match your design system produces professional results in under a minute.

How Box Shadows Work in CSS

The CSS box-shadow property accepts one or more comma-separated shadow definitions. Each definition follows this structure:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

Offset-X moves the shadow left (negative) or right (positive) of the element. Offset-Y moves it up (negative) or down (positive). A positive Y offset is the most common choice — it simulates light from above, which matches natural perception.

Blur radius controls how soft the shadow edges are. A value of 0 produces a hard, sharp shadow. Higher values create a progressively softer, more diffuse shadow.

Spread radius expands or contracts the shadow relative to the element. A positive spread makes the shadow larger than the element — useful for glow effects. A negative spread pulls the shadow inward, very useful when combining it with a large blur to create a natural-looking soft shadow that doesn’t bleed outward.

Colour supports any valid CSS colour format. Using RGBA is almost always preferable — transparent shadows blend correctly over any background, while opaque shadows look harsh and unrealistic.

Inset reverses the shadow direction, placing it inside the element rather than outside. Inner shadows are excellent for form inputs, pressed button states, and soft depth effects on card surfaces.

Multiple layers are separated by commas. The generator handles the comma-joining for you and displays the full value ready to paste.

How to Use the Box Shadow Generator

  1. Choose a preset from the strip at the top — Soft Lift, Card, Raised, Deep, Hard, Retro, Inner, Blue Glow, Red Glow, Double, Floating, or Clear. The preview updates instantly.
  2. Adjust individual layers using the sliders: X Offset, Y Offset, Blur, Spread, and Opacity. Use the colour picker to change the shadow colour, and the Inset checkbox to flip the shadow inside the element.
  3. Add layers by clicking + Add Shadow Layer (up to five). Remove any layer with the ✕ button in its header.
  4. Customise the preview box — change its colour and border radius to match your actual element.
  5. Switch backgrounds — Light, Dark, or Grid — to test how the shadow reads on different surfaces.
  6. Copy your code using Copy box-shadow for the property value, or Copy CSS rule for a complete .element { box-shadow: ... } block.

Understanding the Presets

Soft Lift — a barely perceptible 0 2px 8px shadow at 8% opacity. Ideal for buttons, tags, and chips that need the slightest sense of separation from the page.

Card — 0 4px 16px at 12% opacity. The standard material-style card elevation. Works on any card component, modal, dropdown, or panel.

Raised — 0 8px 24px with a slight negative spread. Creates convincing elevation for interactive components like primary buttons and callout boxes.

Deep — 0 20px 60px with heavy negative spread. Dramatic lifted look for hero elements, feature cards, and modals that need strong visual hierarchy.

Hard — offset 6px 6px with no blur. A crisp retro-style shadow. Works well for illustrated or bold graphic design contexts.

Retro — 4px 4px offset with full opacity. Pure graphic, very deliberate. Common in neo-brutalist design.

Inner — an inset 0 2px 8px shadow. Excellent for text inputs, search bars, and any component that should appear recessed.

Blue Glow / Red Glow — full-spread glow effects using brand-ready colours. Immediately adaptable by adjusting the layer colour picker.

Double / Floating — two-layer combinations producing naturalistic depth. The “Floating” combination closely mimics how physical objects cast shadows under soft overhead lighting.

Is the CSS box shadow generator free?

Yes, completely. No account, no watermark, no usage limit. Generate as many shadows as you need and copy or use the CSS in any project — personal or commercial.

How many shadow layers can I add?

Up to five independent layers. In practice, most real-world box shadows use one or two — three or more are mainly useful for complex glow effects, realistic physical depth simulations, or special design treatments.

Does the generated CSS work in all browsers?

The box-shadow property has been universally supported across all major browsers (Chrome, Firefox, Safari, Edge) since 2013 without vendor prefixes. The generated CSS requires no prefixing and works everywhere.

What is the difference between box-shadow and drop-shadow?

box-shadow applies a shadow to the rectangular bounding box of an element, ignoring any transparency in the element’s content. CSS filter: drop-shadow() applies the shadow to the actual visible pixels, including transparent areas — making it suitable for irregular shapes like icons or cut-out PNG images. For regular UI elements, box-shadow is almost always the right choice.

Why use RGBA colours for shadows?

Shadows look natural when they are semi-transparent — they blend with whatever colour they’re cast on. An opaque shadow always looks like a flat coloured shape rather than a true shadow. RGBA lets you control both the shadow colour and its transparency independently, making it much easier to create realistic effects across different background colours.

Can I use an inset and outer shadow on the same element?

Yes — they are simply two layers in a comma-separated box-shadow value. Add one outer shadow layer and one inset layer in the generator, and the exported CSS will include both. This technique is popular for pressed-button states and layered depth effects.

Why does my shadow look different on dark backgrounds?

Dark shadows (near-black, low opacity) are designed for light backgrounds. On dark backgrounds they often disappear or appear very faint. Switch the preview to “Dark” background in the tool to see exactly how it will look, and adjust the shadow colour (lighter, or a different hue) and opacity as needed.

How do I create a glow effect?

Set both X and Y Offset to 0, set Blur to 20–30px, Spread to 2–5px, pick your glow colour, and raise Opacity to 50–70%. The Blue Glow and Red Glow presets demonstrate this technique — use them as a starting point and change the colour picker to your brand colour.