CSS Box Shadow Generator

Create CSS box-shadow properties visually.

Preview

Settings

0px
4px
6px
0px
10%

CSS Box Shadow Generator Guide

About CSS Box Shadow

box-shadow is a CSS property that creates shadow effects around HTML elements. It is used throughout web design to add depth and dimension to card UIs, button hover effects, modal popups, and more. You can layer multiple shadows on a single element by separating them with commas, and combine outer shadows with inner (inset) shadows to create rich visual effects. This generator lets you visually design your desired shadow using simple sliders, then copy the finished CSS code directly into your project. The box-shadow property was introduced in the CSS3 specification. Before that, achieving similar effects required slicing shadow images or stacking extra div layers manually. Today it is supported in all major browsers without vendor prefixes, and design systems like Material Design and Apple's Human Interface Guidelines recommend elevation through shadows as a core UI pattern.

How It Works

box-shadow renders a shadow based on the element's border-box. The browser first creates a rectangle matching the element's bounding box, then shifts it by the offset-x and offset-y values. Next, the rectangle is expanded or contracted according to the spread value, and a Gaussian blur algorithm softens the edges by the blur amount. For example, box-shadow: 4px 8px 16px -2px rgba(0,0,0,0.15) moves the shadow 4px right and 8px down, applies a 16px blur, and shrinks it by 2px with negative spread to create a soft shadow slightly smaller than the element. Adding the inset keyword runs the same calculation inside the element, producing a pressed or recessed look. Rendering is GPU-accelerated, so normal usage has no performance cost, but when combining shadows with transitions or animations, declaring will-change: box-shadow helps the browser optimize repaints.

User Guide

  1. Click one of the preset buttons to start with a base style.
  2. Adjust the horizontal and vertical offset sliders to position the shadow.
  3. Increase the blur radius for a soft, diffused shadow, or set it to 0 for a sharp edge.
  4. Set a positive spread value to enlarge the shadow, or negative to shrink it.
  5. Choose your shadow color and set the desired opacity level.
  6. Enable the inset checkbox if you need an inner shadow effect.
  7. Copy the CSS code at the bottom and paste it into your project.

Core Features

  • Real-time Preview - See shadow changes instantly as you move the sliders.
  • 6 Built-in Presets - Apply commonly used styles like Subtle, Medium, Large, Sharp, Dreamy, and Inset with one click.
  • Full Color Control - Customize shadow color, box color, and background color freely.
  • Opacity Adjustment - Fine-tune shadow opacity from 0% to 100%.
  • Inset Mode - Toggle between outer and inner shadow with a single checkbox.
  • CSS Code Copy - Copy the generated box-shadow code to your clipboard instantly.

When This Comes in Handy

  • Card Components - A subtle shadow gives cards a floating appearance. Around 4px offset-y with 6px blur works well.
  • Button Hover Effects - Increase the shadow on hover to create an interactive lifting effect.
  • Modals and Popups - Use a large blur and high offset to clearly separate layers from the background.
  • Input Field Focus - Combine inset shadow with a colored glow to indicate focus state.

Common Questions

Q: What is the box-shadow syntax?

The syntax is: box-shadow: offset-x offset-y blur spread color [inset]; Each value uses px units, and inset is optional.

Q: What do offset-x and offset-y mean?

offset-x controls the horizontal position (positive = right, negative = left), while offset-y controls the vertical position (positive = down, negative = up).

Q: What is the difference between blur and spread?

Blur controls how soft the shadow appears - larger values create a more diffused effect. Spread expands (positive) or shrinks (negative) the shadow size. Combining both values gives you a wide range of styles.

Q: When should I use inset shadows?

Inset creates shadows inside the element. It is commonly used for pressed button effects, recessed panel looks, and input field styling.

Q: Can I apply multiple shadows at once?

Yes. Separate multiple shadow values with commas. For example, combining a close shadow with a distant one creates a more three-dimensional effect.

Q: Is box-shadow supported in all browsers?

It is supported in all modern browsers. It even works in IE9 and above, so no vendor prefixes are needed.

Q: How do I add transparency to the shadow color?

In this tool, select a shadow color and adjust the opacity slider - it automatically converts to rgba() format. In CSS, you can also write rgba(0,0,0,0.1) directly.

Q: Does box-shadow affect performance?

Normal usage has negligible impact, but applying shadows with very large blur values to many elements can slow down rendering. Consider using the will-change property when animating shadows.

Related Tools

Related Guides