CSS Box Shadow Generator

About this tool: Create custom CSS box shadows with live preview. Adjust horizontal and vertical offset, blur, spread, color, and other properties to get the perfect shadow effect for your web elements.

How to use: Use the sliders to adjust shadow properties and see the changes in real-time. You can add multiple shadows by clicking the “Add Shadow” button. Copy the generated CSS code to use in your projects.

Horizontal Offset (px)

Vertical Offset (px)

Blur Radius (px)

Spread Radius (px)

Shadow Color

Opacity

Inset Shadow

Preview

box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);

Code copied to clipboard!

Precious chimara

Precious Chimara is dedicated to being a digital entrepreneur and creative thinker who helps people and companies develop and enhance their online presence. Having a background in web development, digital marketing, and content strategy, Precious aims to design instruments and develop solutions that motivate growth, increase productivity, and enhance visibility. Over the years, Precious has executed various online systems which are characterized by simplicity, efficiency, and creative ingenuity to deliver the desired results.