99. Modern CSS: Filter, Backdrop Filter, and Shapes

Advanced features allow designers to achieve effects previously requiring image editors or JavaScript.

1. filter (Image Manipulation)

Applies graphical effects to an element (e.g., images, divs) using functions like blur(), grayscale(), sepia(), and drop-shadow().

css /* Grayscale effect on an image until hovered */ img { filter: grayscale(100%); transition: filter 0.5s; }

img:hover { filter: grayscale(0%); /* Full color on hover */ filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }

2. backdrop-filter (Layer Effects)

Applies effects to the area behind an element. This is famous for creating the macOS/iOS glassmorphism or frosted-glass effect.

css .frosted-nav { background-color: rgba(255, 255, 255, 0.5); /* Blurs everything behind the navigation element */ backdrop-filter: blur(10px); }

3. clip-path (Custom Shapes)

Allows you to clip an element into a complex shape (circle, polygon, etc.), freeing elements from the standard rectangle box.

css .diamond-shape { width: 200px; height: 200px; background: purple; /* Defines the shape using X/Y coordinates */ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }