filter
Applies visual effects such as blur, brightness, hue rotation, and drop shadows. Multiple filter functions run in the written order.
2,114 effects in the catalog use this property.
Syntax
filter: blur(4px) brightness(1.2) drop-shadow(0 4px 8px #000);Watch out
`drop-shadow()` follows the visible outline of transparent PNGs and clipped shapes, while `box-shadow` always follows the rectangular box.
Common values
blur(8px)- Blurs the rendered element
drop-shadow(...)- Follows transparent contours, unlike `box-shadow`
hue-rotate(90deg)- Rotates the hue
saturate(1.6)- Increases saturation
Effects using filter
These are working effects from the catalog. Open a tile to inspect the full source.