filter: grayscale() - Filters - Tailwind CSS

Docs Play Blog Showcase Partners Plus

Filters
grayscale

Getting started

Installation
Editor setup
Compatibility
Upgrade guide

Core concepts

Styling with utility classes
Hover, focus, and other states
Responsive design
Dark mode
Theme variables
Colors
Adding custom styles
Detecting classes in source files
Functions and directives

Base styles

Preflight

Layout

aspect-ratio
columns
break-after
break-before
break-inside
box-decoration-break
box-sizing
display
float
clear
isolation
object-fit
object-position
overflow
overscroll-behavior
position
top / right / bottom / left
visibility
z-index

Flexbox & Grid

flex-basis
flex-direction
flex-wrap
flex
flex-grow
flex-shrink
order
grid-template-columns
grid-column
grid-template-rows
grid-row
grid-auto-flow
grid-auto-columns
grid-auto-rows
gap
justify-content
justify-items
justify-self
align-content
align-items
align-self
place-content
place-items
place-self

Spacing

padding
margin

Sizing

width
min-width
max-width
height
min-height
max-height
inline-size
min-inline-size
max-inline-size
block-size
min-block-size
max-block-size

Typography

Backgrounds

background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size

Borders

border-radius
border-width
border-color
border-style
outline-width
outline-color
outline-style
outline-offset

Effects

box-shadow
text-shadow
opacity
mix-blend-mode
background-blend-mode
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

Filters

filter
backdrop-filter

Tables

border-collapse
border-spacing
table-layout
caption-side

Transitions & Animation

transition-property
transition-behavior
transition-duration