Drop Shadow CSS Generator

Horizontal Offset px

Vertical Offset px

Blur Radius px

Shadow Color

Opacity %

Live Preview

★

Your CSS Code

filter: drop-shadow(8px 8px 20px rgba(0,0,0,0.3));

Click the button to copy code

Similar Tools

Box Shadow CSS Generator

Text Shadow CSS Generator

CSS Gradient Generator

CSS Grid Generator

What is Drop Shadow?

A drop shadow is basically that soft, subtle shadow you see behind an object like text, images, buttons, or pretty much any element in graphic design. In html, we use CSS to generate drop shadow effect with lots of customization like inset, offset, horizontal offset, vartical offset, opacity, radius etc.

For example, the icons on your phone's home screen? Almost always have a subtle drop shadow. Button on a website that appears with shadow on hovering on it. These are some of its example.

Drop Shadow vs Box Shadow

Even though both appears and sounds similar, but they are different in use case.

Feature	Drop Shadow	Box Shadow
What it actually shadows	The content/shape itself (including transparent areas)	The entire rectangular box of the element
Works on images/PNGs	Yes (perfect for logos with transparency)	Kinda sucks (shadows the bounding box, not the visible shape)
Works on text	Yes (the actual letters get the shadow)	Yes, but technically it is still the text's box
CSS property	filter: drop-shadow()	box-shadow
Respects irregular shapes	Yes	No (always rectangular)
Performance	Slightly heavier (especially on lots of elements)	Usually faster

How This Drop Shadow Generator Works?

In the leftside bar, there are few sliders like Horizontal Offset, Vertical Offset, Blur Radius, Shadow Color and Opacity. The moment you interact witht he slicer, you will see a live preview of your drop shadow in the right side bar. The user interface and functionality is quite simple and i hope you all would like it.