Use the controls below to adjust the box shadow properties: horizontal and vertical offsets, blur radius, spread radius, color, opacity, and inset. The CSS code will be generated automatically. Click "Get Code" to view the generated CSS and example HTML.
CSS Box Shadow Generator
Visually generate CSS code for element box shadows.
About the CSS Box Shadow Generator
Add depth and dimension to your web elements with our intuitive CSS Box Shadow Generator. This tool allows you to visually configure and fine-tune box shadows, providing immediate feedback and generating the necessary CSS code instantly.
What is CSS Box Shadow?
The CSS box-shadow property attaches one or more shadows to an element's frame. It's defined by X and Y offsets relative to the element, blur and spread radii, color, and an optional inset keyword to place the shadow inside the element's border. Box shadows can simulate depth, highlight elements on hover, or create various other visual effects.
How to Use This Tool
- Adjust the sliders or type values for Horizontal Offset and Vertical Offset to position the shadow.
- Modify the Blur Radius to soften the shadow's edges and the Spread Radius to expand or contract the shadow's size.
- Choose a base color using the predefined swatches or select "Custom" to use the color picker and text input.
- Control the shadow's transparency using the Opacity slider.
- Check the Inset Shadow box to draw the shadow inside the element's border instead of outside.
- Observe the changes on the preview element on the right.
- Click "Get Code" to view the generated
box-shadowCSS rule and example HTML. - Copy the CSS and apply the class (e.g.,
.shadow-element) to your HTML.
Experiment with different combinations to achieve the perfect shadow effect for your design!
Learn more about the box-shadow property on MDN Web Docs.