DevBolt
Processed in your browser. Your data never leaves your device.

How do I create a CSS box shadow online?

Adjust sliders for horizontal offset, vertical offset, blur radius, spread radius, and color to design your box shadow visually. Add multiple shadow layers, choose from presets, and see a live preview. Copy the production-ready CSS with one click. Everything runs in your browser.

Subtle card shadow
Input
Offset: 0 4px
Blur: 6px
Spread: -1px
Color: rgba(0,0,0,0.1)
Output
box-shadow:
  0 4px 6px -1px rgba(0, 0, 0, 0.1);
← Back to tools

CSS Box Shadow Generator

Design beautiful CSS box shadows visually. Add multiple layers, adjust offsets, blur, spread, and copy the CSS.

12px

Shadow Layers (1)

px
px
px
px
15%

CSS Output

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Presets

About CSS Box Shadows

The box-shadow property adds shadow effects around an element. The syntax is: x-offset y-offset blur spread color.

Offsets (X/Y) control the shadow's position. Positive X moves right, positive Y moves down. Negative values move left and up.

Blur softens the shadow edges. Higher values create a more diffused shadow. A value of 0 creates a sharp shadow.

Spread expands or contracts the shadow. Positive values make the shadow larger, negative values make it smaller than the element.

Inset changes the shadow from outer to inner, creating a pressed/recessed effect.

Multiple shadows can be stacked for realistic depth. Layer subtle shadows for a natural look — this mimics how light creates multiple soft edges in the real world.

Tips & Best Practices

Pro Tip

Layer multiple shadows for realistic depth

A single box-shadow looks flat. Layer 2-3 shadows with increasing blur and offset for natural-looking elevation: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.06). This mimics how real objects cast soft, diffused shadows at multiple distances.

Common Pitfall

Box shadows trigger paint on scroll — use sparingly

CSS box-shadow forces the browser to repaint the element's layer on every frame during animations or scroll. For fixed/sticky headers with shadows, add will-change: box-shadow or use transform: translateZ(0) to promote the element to its own compositor layer. Better yet, use a pseudo-element for the shadow.

Real-World Example

Use inset shadows for pressed/active button states

An inset shadow creates the illusion of a pressed button: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Combine with removing the outer shadow and a slight translateY for a convincing click effect. This costs zero additional DOM elements and works in all browsers.

Security Note

Shadow tricks can be used for clickjacking indicators

Exaggerated box-shadows or outlines are sometimes used to visually indicate iframe boundaries in clickjacking defense. If your site is framed, a visible shadow around the viewport helps users recognize they're in an embedded context. Always set X-Frame-Options or CSP frame-ancestors as the primary defense.

Frequently Asked Questions

How do I create a CSS box shadow?
Adjust the horizontal offset, vertical offset, blur radius, spread radius, and color using DevBolt's visual controls. The tool generates the CSS box-shadow property in real time as you change values. A typical subtle shadow looks like box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) where 0 is horizontal offset, 4px pushes the shadow downward, 6px controls blur softness, and -1px spread shrinks the shadow slightly. You can add multiple shadow layers for realistic depth, toggle the inset keyword for inner shadows, and preview the result on a sample card element. Copy the generated CSS and paste it directly into your stylesheet.
What do the box-shadow values mean in CSS?
The CSS box-shadow property accepts up to six values. Horizontal offset (required) moves the shadow left (negative) or right (positive). Vertical offset (required) moves it up (negative) or down (positive). Blur radius (optional, default 0) controls the softness of shadow edges. Spread radius (optional, default 0) expands or shrinks the shadow beyond the element's dimensions. Color (optional) sets the shadow color, commonly using rgba for semi-transparent shadows. The inset keyword (optional) renders the shadow inside the element instead of outside. Multiple shadows can be combined with commas for layered depth effects.
How do I create Material Design elevation shadows in CSS?
Material Design elevation uses multiple layered box shadows to simulate realistic depth. Each elevation level combines a key shadow (sharp, directional), an ambient shadow (soft, spread), and a penumbra shadow (medium softness). Higher elevations increase the offset and blur values. DevBolt's box shadow generator lets you build and preview these multi-layer shadows visually, adding or removing layers as needed. Material Design defines 24 elevation levels, but most interfaces use only 4 to 6 distinct levels to establish visual hierarchy. For cards, use elevation 1-2. For modals and dialogs, use elevation 8-16.

Related Generate Tools

GQL

JSON to GraphQL Schema

Generate GraphQL schema definitions from JSON data with automatic type inference, Query/Mutation generation, and .graphql download

HTTP

HTTP Request Builder

Build HTTP requests visually and generate code in cURL, JavaScript, Python, Go, Rust, and PHP — lightweight Postman/ReqBin alternative

TBL

HTML Table Generator

Build HTML tables visually with an interactive editor — add rows, columns, header rows, captions, and styling. Export as plain HTML, inline CSS, or Tailwind classes

✂

CSS Clip-path Generator

Create CSS clip-path shapes visually — circle, ellipse, inset, or polygon with draggable points. 13 shape presets, interactive preview, and production-ready CSS output