CSS Box Shadow Generator

Welcome to the CSS Box Shadow Generator!

Use the controls below to easily generate custom CSS box shadows for your website elements. Adjust the settings to see how the shadow looks in real-time, and once you're happy with it, simply copy the generated CSS code to use on your site.

How to Use:

• Offset X: Adjust the horizontal position of the shadow. A positive value will move the shadow to the right, while a negative value will move it to the left.
• Offset Y: Adjust the vertical position of the shadow. A positive value will move the shadow down, while a negative value will move it up.
• Blur: This controls the softness of the shadow. A higher value will create a more diffused shadow, while a lower value will give it a sharper edge.
• Spread: This option increases or decreases the size of the shadow. A positive value will make the shadow larger, while a negative value will make it smaller.
• Color: Choose the color of the shadow. You can adjust the opacity with the slider to make the shadow more or less transparent.
• Inset Shadow: Check this box if you want the shadow to appear inside the element rather than outside.

Once you've customized your shadow, the generated CSS code will appear below the controls. You can copy and paste it directly into your website's CSS file.