Windi CSSBackdrop Filter
Utilities for enabling and disabling backdrop filters on an element.
default
none
CSS
Backdrop Blur
default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
Customizing
windi.config.js
export default {
theme: {
backdropBlur: {
'4xl': '72px',
'5xl': '96px',
'6xl': '128px',
},
},
}
Backdrop Brightness
0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
windi.config.js
export default {
theme: {
backdropBrightness: {
sm: '50',
md: '100',
lg: '150',
},
},
}
Backdrop Contrast
0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
windi.config.js
export default {
theme: {
backdropContrast: {
sm: '50',
md: '100',
lg: '150',
},
},
}
Backdrop Grayscale
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
theme: {
backdropGrayscale: {
50: '0.5',
80: '0.8',
},
},
}
Backdrop Hue Rotate
0
15
30
45
60
90
120
180
-120
-90
-60
-45
-30
-15
CSS
Customizing
windi.config.js
export default {
theme: {
backdropHueRotate: {
sm: '60',
lg: '90',
xl: '180',
},
},
}
Backdrop Invert
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
theme: {
backdropInvert: {
sm: '0.5',
lg: '0.8',
},
},
}
Backdrop Opacity
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
theme: {
backdropOpacity: {
sm: '0.5',
lg: '0.8',
},
},
}
Backdrop Saturate
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
theme: {
backdropSaturate: {
sm: '0.5',
md: '1',
lg: '1.5',
},
},
}
Backdrop Sepia
default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
windi.config.js
export default {
theme: {
backdropSepia: {
sm: '0.5',
md: '0.8',
},
},
}