CSS Box Shadow Generator

What is a CSS Box Shadow?

A CSS box shadow is a property that adds drop shadow effects to elements, creating depth and dimension on web pages. It can be controlled with horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. This tool helps you visualize and generate the exact CSS code you need. The box-shadow property accepts multiple shadow layers separated by commas, allowing complex lighting effects on a single element. The syntax follows the pattern: offset-x offset-y blur-radius spread-radius color inset. Each parameter is optional except the two offset values, which determine the shadow's position relative to the element. Positive offset-x moves the shadow right, negative moves it left; positive offset-y moves it down, negative moves it up. The blur radius controls how much the shadow diffuses, with larger values creating softer, more spread-out shadows that simulate light sources further from the object.

Box shadows are essential for modern web design, helping to establish hierarchy, draw attention to interactive elements, and create realistic lighting effects. They work on buttons, cards, navigation menus, and virtually any block-level element. Understanding how each parameter affects the final result can help you create more sophisticated and professional-looking designs. The spread radius, the fourth value, expands or contracts the shadow size uniformly in all directions—positive values grow the shadow larger than the element, negative values shrink it. This parameter is particularly useful for creating inner shadows that appear to be cut into the page or for extending drop shadows to overlap with adjacent elements. The optional inset keyword, placed at the end of the declaration, creates an inner shadow that appears inside the element's borders rather than outside, simulating an indentation or recessed effect.

This generator runs entirely in your browser with no data collection. You can adjust sliders in real-time to see exactly how your shadow will appear, then copy the ready-to-use CSS code. The tool simplifies the process of creating beautiful shadow effects, saving you from manually tuning each parameter and guessing at the right values. The real-time preview box shows exactly how your shadow will look on a test element, allowing you to fine-tune your settings before implementation. When you check the inset option, the tool generates a CSS string with the inset keyword included, ensuring the generated code is production-ready. The color picker lets you select any color, and the opacity slider lets you adjust the shadow's transparency from fully opaque to invisible, giving you precise control over the visual impact of your shadow effects.

How to use this Box Shadow Generator

• Adjust the X and Y offset sliders to position the shadow relative to the element.
• Change the blur radius to control how soft or sharp the shadow edges appear.
• Use the spread radius to expand or shrink the shadow size.
• Pick a color and opacity that complements your design.
• Check the Inset box to create an inner shadow instead of outer drop shadow.