3 CSS drop-shadow() Examples

Move beyond the limitations of box-shadow with the powerful drop-shadow() filter. Unlike box-shadow, which casts a shadow from the element’s rectangular box, drop-shadow() respects the alpha channel, creating a shadow that perfectly conforms to the actual shape of the content. This makes it the ideal solution for adding realistic shadows to transparent PNGs, intricate SVGs, and even clipped elements. Because it’s a GPU-accelerated filter, it’s highly performant and can even be applied to a parent container to generate a single, unified shadow for a group of child elements.

Last updated:

thumbnail: Neon Icon Hover Effect

Neon Icon Hover Effect

A navigation menu with a neon glow and a complex hover effect. Icons and text use the CSS drop-shadow filter to create a glow effect, while the element’s color is controlled via an inline CSS variable --clr.

# css menu # css horizontal menus # css hover effects # css drop shadow # css box shadow # css pseudo elements # css custom property variables # css transform # css transition

thumbnail: Background Triangle Pattern

Background Triangle Pattern

A clever technique for creating triangles using CSS border (width: 0; height: 0; border: ... solid transparent). The transparent side and top borders allow border-bottom to form a triangle, and its color is cyclically changed via the SCSS selector :nth-child(5n+...).

# css triangle backgrounds # css triangles # css nth child # css drop shadow

Animated Squiggly Border Glow Cardsexternal link

A card with a neon border effect where two CSS animations are synchronized - stroke-dashoffset for the SVG frame and hue-rotate for the drop-shadow glow. Each card gets a unique theme via :nth-child and the --cardAccent CSS variable, while multi-layering with z-index positions the glow underneath the main content.

# css cards # css border animations # css keyframes # css hue rotate # css drop shadow # css custom property variables # css nth child # css neon effects