Skip to main content

CSS Box Shadow Generator

Build layered CSS box shadows visually, start from presets, and copy the code as CSS, JavaScript, or Tailwind.

Runs 100% in your browser

Shortcuts
Copy the output
Alt + Shift + C

Your input is saved in this browser only. Reset clears it.

Preview

Presets

Shadow Layers

Layer 1
rgba(0,0,0,0.2)

Generated Code

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

How to use the CSS Shadow Generator

  1. Pick a preset or adjust the offset, blur, spread, and color.

  2. Add layers to stack several shadows and preview them on your own colors.

  3. Choose an output format and copy the code, or copy a link to share the shadow.

Example: A soft card shadow

Settings
Offset: 0px x, 4px y
Blur:   8px
Spread: 0px
Color:  rgba(0,0,0,0.2)
CSS
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

Add a second, tighter layer (such as 0 1px 2px rgba(0,0,0,0.15)) for a more realistic result: one layer for contact, one for distance.

Frequently Asked Questions

How does the CSS box-shadow property work?

box-shadow takes an optional inset keyword, a horizontal offset, a vertical offset, a blur radius, an optional spread radius, and a color: box-shadow: 0 4px 8px rgba(0,0,0,0.2). Offsets move the shadow, blur softens the edge, and spread grows or shrinks it before blurring.

How do I create a realistic shadow?

Layer two or three shadows instead of using one large blur. A tight, dark shadow close to the element suggests contact, while a wider, lighter one suggests distance from the surface. Keep every layer's light direction the same, usually straight down.

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

box-shadow follows the element's rectangle (and border-radius), while filter: drop-shadow() follows the visible shape, including transparency. Use drop-shadow for PNGs and SVG icons with irregular outlines, and box-shadow for cards, buttons, and other boxes.

Do shadows affect performance?

Large blur radii are expensive to paint, especially on mobile and when animated. Prefer moderate blur values, avoid animating box-shadow directly (animate opacity on a pseudo-element instead), and reuse a small set of shadow tokens across the interface.

About the CSS Shadow Generator

The CSS Shadow Generator is a visual tool that helps you create beautiful, customized shadow effects for your web projects. Whether you're designing buttons, cards, modals, or other UI elements, this tool makes it easy to craft the perfect shadow without writing CSS code from scratch.

See how this tool fits with the type scale, contrast, and critical CSS tools in Four Free Tools for Frontend Devs.

How the Shadow Generator Works

Our Shadow Generator provides an intuitive interface to adjust all aspects of CSS shadows:

  1. Horizontal offset (X) - controls the shadow's position left or right of the element
  2. Vertical offset (Y) - controls the shadow's position above or below the element
  3. Blur radius - determines how blurry or sharp the shadow appears
  4. Spread radius - expands or contracts the shadow size
  5. Color and opacity - customize the shadow's appearance and intensity
  6. Inset option - creates inner shadows instead of outer shadows

As you adjust these parameters, you'll see a real-time preview of your shadow. Once you're satisfied with the result, you can copy the generated CSS code in various formats (CSS, JavaScript, or Tailwind) for immediate use in your projects.

Types of CSS Shadows

Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. You can create multiple shadows with different properties, and even create inner shadows using the inset keyword.

Drop Shadow

The CSS filter: drop-shadow() function creates a drop shadow that follows the alpha channel of the element, making it ideal for irregular shapes like icons or images with transparency.

Popular Shadow Styles

  • Material Design shadows - Layered shadows that create a sense of elevation
  • Soft shadows - Subtle, diffused shadows for a gentle depth effect
  • Hard shadows - Sharp, defined shadows for a more dramatic look
  • Neumorphism - Combines inner and outer shadows to create a soft, extruded appearance
  • Floating effect - Shadows that make elements appear to float above the page

Pro Tip

For the most realistic shadows, try using multiple shadow layers with different properties. Light in the real world creates complex shadows, and combining several subtle shadows can create more natural-looking depth than a single strong shadow.