Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

filter

Introduction

The filter CSS property applies graphical effects like blur or color shift to an element.

INFO

Currently only the grayscale and blur functions are supported.

If you use opacity, you can directly set properties for the view, link

Views with the grayscale attribute added on Android will create off-screen buffer on the GPU. A large number of off-screen buffer will cause rendering performance to decrease. It is recommended to replace filter: grayscale(0) with filter: none to remove off-screen caching when grayscale is not needed.

Android blur (OS Version < 12)

When using blur, you can add blur-sampling property (an int value) to the node to set the downsampling ratio to improve performance.

Setting the blur area may cause performance issues if content is updated all the time.

For higher blur efficiency, it is recommended that the actual size of the blur-radius should not exceed 25, that is, the maximum write 25ppx or 25/density px.

Examples

css-apisrc/filter/App.tsx
Preview

Syntax

filter: grayscale(100%);
filter: blur(5px);

Formal definition

Initial valuenone
Applies toall elements
Inheritedno
Animatableyes

Formal Syntax

filter = <filter-function>

<filter-function> =
  <blur()>         |
  <grayscale()>    |


<blur()> =
  blur( <length>? )

<grayscale()> =
  grayscale( [ <percentage> ]? )

Difference between web

Different number of functions supported

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.