Logo Windi CSS

Фильтры

Фильтр

Утилиты для включения и отключения фильтров на элементе.

default
none
CSS
.filter {
  --tw-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);
  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

Filter Blur

default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
.blur-sm {
  --tw-blur: blur(4px);
}
Персонализация
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
.brightness-100 {
  --tw-brightness: brightness(1);
}
Персонализация
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
.contrast-100 {
  --tw-contrast: contrast(1);
}
Персонализация
windi.config.js
export default {
  theme: {
    contrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Drop Shadow

default
sm
md
lg
xl
2xl
none
CSS
.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}
Персонализация
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
.grayscale {
  --tw-grayscale: grayscale(100%);
}
Персонализация
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
.hue-rotate-45 {
  --tw-hue-rotate: hue-rotate(45deg);
}
Персонализация
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
.invert {
  --tw-invert: invert(100%);
}
Персонализация
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
.saturate-0 {
  --tw-saturate: saturate(0);
}
Персонализация
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
.sepia {
  --tw-sepia: sepia(100%);
}
Персонализация
windi.config.js
export default {
  theme: {
    sepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

Backdrop Filter

Утилиты для включения и отключения фоновых фильтров для элемента.

default
none
CSS
.backdrop-filter {
  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);
  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

Backdrop Blur

default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
}
Персонализация
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
.backdrop-brightness-100 {
  --tw-backdrop-brightness: brightness(1);
}
Персонализация
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
.backdrop-contrast-100 {
  --tw-backdrop-contrast: contrast(1);
}
Персонализация
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
.backdrop-grayscale {
  --tw-backdrop-grayscale: grayscale(100%);
}
Персонализация
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
.backdrop-hue-rotate-45 {
  --tw-backdrop-hue-rotate: hue-rotate(45deg);
}
Персонализация
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
.backdrop-invert {
  --tw-backdrop-invert: invert(100%);
}
Персонализация
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
.backdrop-opacity-50 {
  --tw-backdrop-opacity: opacity(0.5);
}
Персонализация
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
.backdrop-saturate-0 {
  --tw-backdrop-saturate: saturate(0);
}
Персонализация
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
.backdrop-sepia {
  --tw-backdrop-sepia: sepia(100%);
}
Персонализация
windi.config.js
export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}