Windi CSSFilter
Utilities for enabling and disabling filters on an element.
default
none
CSS
Filter Blur
default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
Customizing
windi.config.js
export default {
theme: {
blur: {
'4xl': '72px',
'5xl': '96px',
'6xl': '128px',
},
},
}
Filter Brightness
0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
windi.config.js
export default {
theme: {
brightness: {
sm: '50',
md: '100',
lg: '150',
},
},
}
Filter Contrast
0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
windi.config.js
export default {
theme: {
contrast: {
sm: '50',
md: '100',
lg: '150',
},
},
}
Filter Drop Shadow
default
sm
md
lg
xl
2xl
none
CSS
Customizing
windi.config.js
export default {
theme: {
dropShadow: {
'3xl': 'drop-shadow(0 30px 30px rgba(0, 0, 0, 0.2))',
'4xl': 'drop-shadow(0 40px 40px rgba(0, 0, 0, 0.3))',
},
},
}
Filter 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: {
grayscale: {
50: '0.5',
80: '0.8',
},
},
}
Filter Hue Rotate
0
15
30
45
60
90
120
180
-120
-90
-60
-45
-30
-15
CSS
Customizing
windi.config.js
export default {
theme: {
hueRotate: {
sm: '60',
lg: '90',
xl: '180',
},
},
}
Filter 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: {
invert: {
sm: '0.5',
lg: '0.8',
},
},
}
Filter 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: {
saturate: {
sm: '0.5',
md: '1',
lg: '1.5',
},
},
}
Filter 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: {
sepia: {
sm: '0.5',
md: '0.8',
},
},
}