How do I use the CSS Box Shadow Generator?

Use the X and Y offset sliders to position the shadow, then adjust blur and spread to control softness and size. Pick a color and opacity, toggle inset if needed, and click Copy CSS to copy the finished declaration to your clipboard.

What CSS properties can I control with this tool?

The generator controls all five box-shadow parameters: horizontal offset (X), vertical offset (Y), blur radius, spread radius, and shadow color including alpha transparency via an RGBA output. You can also toggle the inset keyword.

What does the generated output look like?

The tool outputs a single CSS declaration ready to paste into any stylesheet, for example: box-shadow: 4px 6px 12px 2px rgba(0, 0, 0, 0.25). For inset shadows it prepends the inset keyword. The value is cross-browser compatible and requires no vendor prefixes in modern browsers.

Does the tool upload anything to a server?

No. The CSS Box Shadow Generator runs entirely in your browser. There are no server requests and nothing is uploaded or stored. Your design choices remain completely private.

Can I create multiple box shadows on one element?

CSS natively supports multiple shadows on a single element by comma-separating declarations, for example: box-shadow: 2px 2px 5px rgba(0,0,0,0.3), inset 1px 1px 3px rgba(255,255,255,0.5). This generator produces one shadow at a time, which you can then manually combine in your stylesheet.

Design & UI★ Free forever✓ No account🔒 No upload📴 Works offlineUpdated April 28, 2026

Free CSS Box Shadow Generator

Generate CSS box-shadow property values visually — adjust offset, blur radius, spread, and color with live preview, then copy the ready-to-use CSS code directly into your stylesheet.

Browse all tools Browse more design & ui tools·Built by Achraf A., Full-Stack Developer · Morocco

Box Shadow Generator — free online tool interface

Free CSS Box Shadow Generator

Quick Answer

What is the CSS box-shadow syntax and what does each value do?

The CSS box-shadow shorthand is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color]. offset-x moves the shadow right (+) or left (−). offset-y moves it down (+) or up (−). blur-radius (default 0) controls softness — higher = softer. spread-radius expands (+) or contracts (−) the shadow size. inset makes the shadow appear inside the element. Example: box-shadow: 2px 4px 12px rgba(0,0,0,0.15) creates a soft outer drop shadow. Layer multiple shadows with commas: box-shadow: shadow1, shadow2.

Create beautiful and layered shadows for your web elements. Visually adjust X and Y offsets, blur radius, spread radius, color, and opacity to generate cross-browser compatible CSS instantly.

Shadow Layers

Offset X4px

Offset Y4px

Blur8px

Spread0px

Opacity25%

Shadow Color

Preview

Gray

CSS Output

box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);

Tailwind CSS Equivalents

Click any class to copy it to your clipboard. For custom values, use shadow-[0_4px_6px_rgba(0,0,0,0.1)] arbitrary value syntax.

Preset Library

Click any preset to load it into the editor. Presets may use multiple layers — you can edit each layer individually after loading.

Material Design

Neumorphism

Brutalism

Soft UI

Flat

Why most generated shadows look wrong

The default shadow from most generators is symmetrical: box-shadow: 0 4px 6px rgba(0,0,0,0.1). It renders correctly but looks flat and artificial. Real shadows are directional — light comes from above, so shadows fall below and slightly to one side. They also soften as objects rise higher from the surface: a card at 2dp elevation has a tight, dark shadow; a modal at 24dp has a large, diffuse one. Full write-up on shadow realism here.

The two most impactful fixes: (1) Add a small positive Y offset (2–4px for low elevations) to simulate light from above. (2) Use two layered shadows — one tight and dark for the direct shadow, one wide and lighter for ambient light diffusion. Google's Material Design uses exactly this technique for all elevation levels.

Shadow presets by elevation level

Component	Elevation	CSS
Subtle card border	Near 0	0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)
Button (resting)	Low	0 2px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08)
Dropdown / popover	Medium	0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08)
Card (hovering)	Medium-high	0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08)
Modal / dialog	High	0 20px 48px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.10)

These are starting points. Adjust opacity based on your background color: shadows on white need less opacity than shadows on light-grey surfaces. Dark mode requires higher opacity (0.3–0.5) because contrast ratios flip.

When to use colored shadows

Colored shadows work well when the surface casting the shadow has a strong hue — a blue card with a blue-tinted shadow, for example. The trick is to use a muted, desaturated version of the color at low opacity rather than the full saturated value. A button with background: #6366f1 (Indigo-500) reads well with box-shadow: 0 4px 14px rgba(99,102,241,0.4). Using the full saturation without reducing opacity makes the shadow look like a glow effect, not an elevation shadow.

Was this tool helpful?

What is Box Shadow Generator?

CSS Box Shadow Generator is a free browser-based tool for creating `box-shadow` CSS property values visually without memorizing the parameter syntax. The CSS box-shadow property accepts up to 6 values — horizontal offset, vertical offset, blur radius, spread radius, color, and the optional `inset` keyword — and combining them manually to produce the shadow you want is time-consuming without visual feedback.

Box shadows are a fundamental part of modern web UI design. They add depth, elevation, and focus to cards, buttons, modals, and form inputs. Material Design, Apple Human Interface Guidelines, and Tailwind CSS all use systematic shadow scales to communicate depth and interactivity. Getting shadows right is a visual skill — you need to see the result in context, not guess from numbers.

This tool provides real-time visual feedback as you drag sliders for offset, blur, spread, and color. You can layer multiple shadows (CSS supports comma-separated shadow lists) to create complex elevation effects. The generated CSS is copy-paste ready for any stylesheet, Tailwind config, or CSS-in-JS setup.

How to use Box Shadow Generator in 3 steps

1
Adjust the shadow parameters
Use the sliders to set horizontal offset, vertical offset, blur radius, and spread radius. Watch the live preview update as you drag.
2
Choose the shadow color and opacity
Pick a color using the color picker and set opacity to create subtle (rgba semi-transparent) or strong (solid color) shadows.
3
Copy the generated CSS
Copy the box-shadow property value and paste it into your CSS file, Tailwind config, or component styles.

Key features and benefits

Visual sliders for offset, blur, spread, and color with live preview
Generates ready-to-paste CSS box-shadow property values
Supports inset shadows, multiple shadow layers, and rgba colors
No guessing — see the exact shadow before copying the code
Works for cards, buttons, modals, and any CSS element with a shadow

Common use cases

A UI developer designs a card component's elevation shadow visually and copies the exact box-shadow value into the Tailwind CSS config.

A designer mocks up a button's hover state shadow and shares the generated CSS with the development team.

A web developer replicates a Material Design elevation level by adjusting the generator sliders until the shadow matches the design spec.

Why browser-based works better

The live preview eliminates the guess-and-refresh cycle of writing box-shadow values by hand. Drag the sliders, see the result, copy the code — one step instead of four.

Supporting multiple shadow layers lets you create sophisticated elevation effects (like card shadows with a close shadow + a diffuse shadow) that would take many iterations to get right manually.

You might also need

Continue this workflow with nearby browser-based tools so you can validate, convert, and ship output without context switching.

References and standards

Box Shadow Generator FAQs

Quick answers about the workflow, privacy, and where this tool fits in a broader job.

What is the CSS box-shadow syntax?

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Example: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1). The inset keyword makes the shadow appear inside the element instead of outside.

Can I add multiple box shadows to one element?

Yes. CSS supports comma-separated shadow lists: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). This is how Material Design elevation levels are implemented.

What is the difference between blur radius and spread radius?

Blur radius controls how soft and diffuse the shadow edge is — a higher value creates a blurrier shadow. Spread radius expands or contracts the shadow size — positive values make the shadow larger than the element, negative values shrink it.

Does box-shadow affect layout?

No. Box shadows are rendered outside the normal box model and do not affect the layout of surrounding elements. They are purely visual and have no effect on element dimensions or spacing.

How do I make a card shadow like Tailwind CSS?

Tailwind's shadow-md is: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1). Use this generator to match or customize that shadow for your own design system.

Keep the workflow moving with nearby tools that solve the next likely step.

Built and maintained by

Achraf A.

Founder & developer — built and maintains every tool on this site

Last updated: April 28, 2026

Tested in Chrome, Firefox, and Safari on desktop and mobile.