Welcome to the CSS Box Shadow Generator! Here you can create beautiful box shadows with ease. This tool allows you to customize shadows for your web elements, providing a real-time preview and the ability to copy the generated CSS code instantly. Whether you are a web designer or developer, this generator will help you enhance your projects with stunning shadow effects.

Features

• Add multiple shadows to a single box.
• Customize each shadow's offset, blur, spread, color, and opacity.
• Toggle between inset and outset shadows.
• Preview your box shadow in real-time.
• Copy the generated CSS code with a single click.
• Access a library of preset shadow configurations for quick use.

Settings

• Canvas Colour: Change the background color of the preview area.
• Container Colour: Change the background color of the box.
• Border Size: Adjust the border size of the box.
• Border Color: Change the border color of the box.
• Border Style: Select the border style of the box.
• Border Radius: Adjust the border radius of the box.
• Container Width: Adjust the width of the box.
• Container Height: Adjust the height of the box.
• Include in CSS: Include border and background settings in the generated CSS.

How to Guide

1. Click the "Add Shadow" button to add a new shadow.
2. Use the controls to customize the shadow's properties.
3. Preview the shadow in the preview area.
4. Click the "Copy CSS" button to copy the generated CSS code.
5. Explore the preset shadows for quick and easy shadow configurations.