The Box Shadow Generator lets you generate box shadow CSS declarations quickly and easily.
Use the sliders and color pickers to set the values of the shadow box and get a real-time preview of it within seconds.
How to use this CSS Box Shadow Generator?
To create a quick CSS code for the shadow of a box by using our online tool, follow the below instructions:
- Adjust the parameters of Horizontal Offset, Vertical Offset, Blur, and Spread (in pixels) as per your requirements.
- Choose the box color by using either RGB, HSL, or HEX color pickers.
- Enable the "Inset" option to change the shadow from outer to inner.
- Copy the generated box-shadow CSS code and paste it wherever you want.
Useful features of our CSS Box Shadow Generator
Easy to use
If you are new to this tool and want to know how to use a box shadow in CSS, then you are at the right place.
Our free box shadow generator allows you to generate the CSS of the shadow box with one click and lets you paste it anywhere in real-time.
Set the Shadow Parameters
This feature lets you set the below parameters of the box only in pixels in order to create the shadow of a box:
- Horizontal Offset
- Vertical Offset
- Blur
- Spread
Just move the slider for each parameter from left to right and adjust the values as per your requirements.
Choose the shadow color
This feature of our CSS shadow generator makes it easy for you to select the color of the box by using different color pickers.
It is integrated well with all of the RGB, HSL, or HEX color pickers and helps you select the box color from multiple color options.
A Quick Inset Option
By enabling the "Inset" option, this free generator automatically changes the box shadow from the outer to the inner side.
Multiple shadows at the same time
Our online box shadow generator provides an option to add multiple shadows to a box without any hassle.
Simply click on the "Add Shadow" button and our tool will generate a new shadow for the box.
Delete Button
This feature lets you delete the CSS of the newly added shadow of a box with a single click.
Just click on the "Delete" icon and our tool will quickly remove the selected shadow CSS code from the output.
Copy the code to the clipboard
This feature helps you copy the output code of the box shadows in real-time. By clicking on the "Copy" button, the generated CSS code will be copied to the clipboard. You can then paste the output code into the CSS without any hassle.
