Web Tools - Developer Utilities

Preview

CSS

filter: none;

Filters

Blur0.0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

Drop Shadow

X Offset0px

Y Offset0px

Blur0px

Color#000000

Presets

About CSS Filters

Syntax

filter: function(value) function(value);
Multiple filter functions can be chained together separated by spaces. They are applied in the order listed.

Filter vs Backdrop Filter

The filter property applies effects to the element itself. Use backdrop-filter to apply effects to the area behind an element, commonly used for frosted-glass UI effects.

Performance

CSS filters are GPU-accelerated in most browsers. However, blur() with large values can be expensive. Use will-change: filter on animated elements to hint the browser for optimization.

Drop Shadow vs Box Shadow

drop-shadow() follows the alpha channel of an image, creating shadows that match the shape.box-shadow always follows the rectangular box of the element.