CSS filters
E662772
CSS filters are visual effects in web design that allow developers to modify the rendering of elements—such as blurring, adjusting brightness, or changing color—using CSS.
Statements (54)
| Predicate | Object |
|---|---|
| instanceOf |
CSS feature
ⓘ
web technology ⓘ |
| affectsRenderingOf | element pixels ⓘ |
| appliedWithProperty |
backdrop-filter
ⓘ
filter ⓘ |
| appliesTo |
HTML elements
ⓘ
SVG elements ⓘ backgrounds ⓘ images ⓘ video elements ⓘ |
| browserSupport | widely supported in modern browsers ⓘ |
| canBeAnimated | true ⓘ |
| computedValueType | list of filter functions ⓘ |
| definedIn | Filter Effects Module Level 1 NERFINISHED ⓘ |
| effectType |
raster-based effect
ⓘ
visual effect ⓘ |
| introducedIn | CSS3 era ⓘ |
| partOf | Cascading Style Sheets NERFINISHED ⓘ |
| performanceImpact |
canBeGPUAccelerated
ⓘ
mayIncreaseRenderingCost ⓘ |
| relatedConcept |
Canvas image processing
ⓘ
SVG filters ⓘ |
| relatedProperty |
mix-blend-mode
ⓘ
opacity ⓘ transform ⓘ |
| standardizedBy | W3C NERFINISHED ⓘ |
| supportsAnimations | true ⓘ |
| supportsChaining | true ⓘ |
| supportsFunction |
blur()
ⓘ
brightness() ⓘ contrast() ⓘ drop-shadow() ⓘ grayscale() ⓘ hue-rotate() ⓘ invert() ⓘ none ⓘ opacity() ⓘ saturate() ⓘ sepia() ⓘ url() ⓘ var() ⓘ |
| supportsMultipleFilters | true ⓘ |
| supportsTransitions | true ⓘ |
| syntaxExample |
backdrop-filter: blur(10px);
ⓘ
filter: blur(5px); ⓘ filter: brightness(1.2) contrast(0.8); ⓘ filter: grayscale(100%); ⓘ |
| usedFor |
applying visual effects to elements
ⓘ
creating UI effects ⓘ image manipulation in the browser ⓘ post-processing rendered content ⓘ video manipulation in the browser ⓘ |
| usedIn |
web design
ⓘ
web development ⓘ |
Referenced by (1)
Full triples — surface form annotated when it differs from this entity's canonical label.