CSS Box Shadow Generator

How to Use Our CSS Box Shadow Generator

This generator gives you full control over the CSS box-shadow property through a simple and intuitive interface. As you move the sliders and change the settings, the preview element will update in real-time.

• Horizontal Offset (X): This slider moves the shadow along the horizontal axis. Positive values (e.g., 10px) shift the shadow to the right, while negative values (e.g., -10px) shift it to the left.

• Vertical Offset (Y): This slider moves the shadow along the vertical axis. Positive values (e.g., 10px) push the shadow down, and negative values (e.g., -10px) push it up.

• Blur Radius: This controls the softness or sharpness of the shadow’s edge. A value of 0 creates a completely sharp, un-blurred edge. Higher values (e.g., 25px) create a much softer, more diffused, and natural-looking shadow.

• Spread Radius: This slider controls the size of the shadow itself before any blur is applied. Positive values (e.g., 5px) expand the shadow, making it larger than the element. Negative values (e.g., -5px) contract the shadow, making it smaller.

• Shadow Color & Opacity: Use the color picker to select the exact hue for your shadow. The opacity slider below it controls the shadow’s transparency. For realistic shadows, it’s best to use a shade of black (e.g., #000000) with a low opacity (e.g., 10-25%).

• Inset (Toggle): By default, box shadows are cast outside of an element. Activating the inset toggle flips this, drawing the shadow on the inside of the element’s border. This is perfect for creating pressed-in or engraved effects.

Once you are satisfied with your design, simply click the “Copy Code” button to copy the generated CSS rule to your clipboard.

Understanding Your Results

The generator produces a single line of CSS code that you can apply directly to any element in your stylesheet. This code follows the standard box-shadow property syntax.

The syntax for the box-shadow property is: box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color] [inset];

Let’s break down a typical generated result:

.my-element {
  box-shadow: 10px 15px 30px -5px rgba(0, 0, 0, 0.25);
}

• 10px: This is the Horizontal Offset. The shadow is shifted 10 pixels to the right.

• 15px: This is the Vertical Offset. The shadow is shifted 15 pixels down.

• 30px: This is the Blur Radius. The edge of the shadow is softened with a 30-pixel blur.

• -5px: This is the Spread Radius. The shadow is contracted by 5 pixels, making it slightly smaller than the element.

• rgba(0, 0, 0, 0.25): This is the Color. It defines a black (rgb(0,0,0)) shadow with 25% opacity (a(0.25)). Using rgba or hsla is best practice for realistic shadows.

• inset (optional): If this keyword were present at the end, the shadow would be drawn inside the element.

A Gallery of Shadow Examples

To see the versatility of the box-shadow property, here are a few popular styles you can create with our generator:

Frequently Asked Questions

How do I add multiple box shadows to one element?

You can layer multiple shadows on a single element by separating them with a comma. This is a powerful technique for creating complex depth and lighting effects. The generator will handle this for you if you use a “multi-layer” feature, but you can also write it manually. The first shadow in the list will be the top-most layer.

Concrete Example: Here is the code for a card with a subtle bottom shadow and a faint blue top glow.

.multi-shadow-card {
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), /* Bottom shadow */
    0px -4px 6px -2px rgba(59, 130, 246, 0.2); /* Top glow */
}

How can I create a shadow on just one side?

This is a very common requirement. While there’s no box-shadow-bottom property, you can achieve this effect with a clever trick using a negative spread radius.

1. Set the Horizontal Offset to 0.

2. Set the Vertical Offset to a positive value (e.g., 10px) to push the shadow down.

3. Set the Blur Radius to a value (e.g., 12px).

4. Crucially, set the Spread Radius to a negative value that is roughly the opposite of your blur radius (e.g., -8px).

The negative spread “pulls in” the shadow from the sides and top, leaving only the blurred bottom edge visible.

Example Code for a Bottom-Only Shadow: box-shadow: 0px 10px 12px -8px rgba(0, 0, 0, 0.2);

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

While they seem similar, they have one key difference:

• box-shadow: Applies a shadow to the rectangular box of the element itself. If you apply it to a transparent PNG image, the shadow will still be behind the rectangular boundary of the image, not the shape of the content inside.

• filter: drop-shadow(...): This CSS filter applies a shadow that conforms to the shape of the element’s content. If you use it on a transparent PNG of a star, the shadow will be star-shaped.

Use box-shadow for general UI elements like cards, buttons, and containers. Use drop-shadow() when you need a shadow to follow the exact contours of an image or complex shape.

How does box-shadow affect website performance?

Complex box shadows, especially those with large blur radii and those that are animated, can be computationally expensive for a browser to render. This is because the browser has to calculate the blur for a large area of pixels. Overusing complex shadows on many elements can lead to slower page rendering and janky scrolling, especially on less powerful devices. To optimize performance:

• Keep blur and spread radii as small as possible to achieve your desired effect.

• Avoid animating the box-shadow property directly. If you must animate a shadow, it’s often more performant to animate the opacity of a pseudo-element (::before or ::after) that contains the shadow.

• Use simple shadows for elements that will appear many times on a page (like list items).

What are some common design mistakes to avoid with box shadows?

1. Using Pure Black: Never use #000000 at full opacity. Real-world shadows are never pure black. Use a translucent black (rgba(0,0,0,0.1)) or a dark, desaturated version of your primary brand color.

2. No Blur: A shadow with 0 blur looks unnatural and harsh unless you are specifically aiming for a hard-edged, graphic style.

3. Ignoring the Light Source: Keep your shadows consistent. If one shadow is offset down and to the right, all shadows should be, as if they are all cast from a single light source in the top-left.

4. Overdoing It: The best shadows are often the ones you don’t consciously notice. The goal is to create a subtle sense of depth and hierarchy, not to make the shadows the main attraction.

How do I create the “neumorphism” (soft UI) effect with box-shadows?

Neumorphism relies on using two box shadows on the same element: one light, one dark, placed on opposite corners. This creates the illusion that the element is extruded from or pressed into the background.

Concrete Example: An element that appears extruded from a light gray background (#e0e0e0).

.neumorphic-element {
  background: #e0e0e0;
  border-radius: 20px;
  /* Top-left light shadow, bottom-right dark shadow */
  box-shadow: 9px 9px 16px #bebebe, -9px -9px 16px #ffffff;
}

Can I animate a box-shadow?

Yes, you can animate a box-shadow using CSS transition. For example, you can make a shadow grow larger when a user hovers over a button.

.animated-button {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.animated-button:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

As mentioned earlier, be mindful of performance. Animating box-shadow can be demanding on the browser. For simple interactions like this, it’s generally fine, but avoid it for continuous or complex animations.

What is the browser compatibility for box-shadow?

The box-shadow property has excellent browser support and has been supported by all major browsers (Chrome, Firefox, Safari, Edge) for many years. It is safe to use in any modern web project without needing vendor prefixes (-webkit-, -moz-).

How does box-shadow interact with border-radius?

The box-shadow property respects the border-radius of an element. If you have an element with rounded corners, the shadow it casts will also have the same rounded corners. This works seamlessly and is essential for creating modern UI components like rounded buttons and cards.

What units can I use for box-shadow values?

While pixels (px) are the most common unit, you can use any standard CSS length unit for the offset, blur, and spread values. This includes:

• rem and em: Relative units that scale with font size, which is great for accessibility and responsive design.

• %: Percentages can be used, but they are often calculated relative to the element’s size and can have inconsistent results, especially for blur.

• vw and vh: Viewport units, allowing the shadow to scale with the size of the browser window.

For most predictable results, px and rem are the recommended units.

After mastering shadows, elevate your designs with vibrant colors and backgrounds. Use our CSS Gradient Generator to create beautiful, smooth color transitions for your elements. If you need to work with different color formats, our Color Converter can instantly switch between HEX, RGB, and HSL values.