Interactive CSS Box-Shadow Generator

The `box-shadow` property is a powerful tool in a web designer's arsenal, allowing you to add depth and dimension to elements on a webpage. A shadow can make an element appear elevated, recessed, or simply give it a subtle, polished outline. While its syntax might seem complex at first, it's composed of several distinct parts that our generator helps you control visually.

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

• Horizontal Offset: A positive value moves the shadow to the right, while a negative value moves it to the left.
• Vertical Offset: A positive value moves the shadow down, and a negative value moves it up.
• Blur Radius: This is the most crucial value for creating a soft, realistic shadow. A value of 0 results in a sharp, un-blurred edge. The larger the value, the more blurred and spread out the shadow becomes.
• Spread Radius: This value expands or contracts the shadow. A positive value increases its size, making the shadow larger than the element, while a negative value shrinks it. This is useful for creating tight glows or outlines.
• Color: Sets the color of the shadow. Using a semi-transparent black (like `rgba(0,0,0,0.2)`) often produces a more natural look than a solid color. Our generator includes an opacity slider for this exact purpose.
• Inset (Optional): By adding the `inset` keyword, the shadow is drawn inside the element's border instead of outside. This creates a pressed or sunken effect.

One of the most powerful features of `box-shadow` is the ability to create multiple, layered shadows on a single element. You can achieve this by providing a comma-separated list of shadow values.

For example, to create a soft, deep shadow, you might use two layers:

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
            0 1px 3px rgba(0, 0, 0, 0.08);

The first shadow is softer and more diffuse, setting the ambient depth. The second is a smaller, slightly darker shadow positioned closer to the element, adding a crisp edge that enhances the sense of elevation. This technique, popularized by design systems like Material Design, creates shadows that feel much more realistic and nuanced than a single, flat shadow ever could.

While our current generator focuses on creating a single, perfect shadow, you can use it to generate the values for each layer individually and then combine them in your stylesheet.

A great shadow is just one part of a polished design. Use our other tools to perfect your vision:

• Border Radius Previewer: Match your shadow to perfectly rounded corners for a modern, soft look.
• Gradient Generator: Create beautiful backgrounds for your shadow-casting elements.
• WCAG Contrast Checker: Ensure the text on your elevated elements is accessible and readable against its background.