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
- Click the "Add Shadow" button to add a new shadow.
- Use the controls to customize the shadow's properties.
- Preview the shadow in the preview area.
- Click the "Copy CSS" button to copy the generated CSS code.
- Explore the preset shadows for quick and easy shadow configurations.