Box Shadow Generator
Generate Css box shadow with tool.
Filter Drop Shadow Generator
Quickly generate CSS drop shadow with online tool.
Show Code
filter: drop-shadow(69px -18px 19px rgba(38, 0, 255, 1));
/* Optional */
background-color:rgba(243, 244, 245, 1);
width:auto;
height:200px;
Filter Drop-Shadow
If you're into CSS, you've probably heard of box-shadow. You actually have another option for shading, but not many people know about it.
Png image box shadow
Users occasionally research how to add a box shadow to a png image. Box-shadow is not the right choice for transparent images like PNG. drop-shadow should be used for transparent images. Filter drop shadow is supported by all current browsers.
So what is drop-shadow?
It is a css function of the drop-shadow filter property.
When added to an element, it creates a drop shadow for the element.
The drop-shadow syntax is as follows:
filter : drop-shadow(offset-x offset-y blur, color);
But you dont need to keep them in mind. We have developed a filter drop-shadow generator for you.
You can easily create your drop shadow as you wish and use it in your project.
Can I share my CSS design and code?
Yes, After creating your design, click the 'Share Your Design' button. The system will create a short link for you. Thanks to this link, you can share your design with your friends with your css code. Your friends can update the design and get a new link and send it to you.