Effects & Filters

Box Shadow

sz prop	Tailwind class	Preview
{ shadow: 'sm' }	shadow-sm
{ shadow: true }	shadow
{ shadow: 'md' }	shadow-md
{ shadow: 'lg' }	shadow-lg
{ shadow: 'xl' }	shadow-xl
{ shadow: '2xl' }	shadow-2xl
{ shadow: 'inner' }	shadow-inner
{ shadow: 'none' }	shadow-none
{ shadowColor: 'blue-500' }	shadow-blue-500
{ shadowColor: { color: 'blue-500', op: 30 } }	shadow-blue-500/30

box shadow scale — sm, md, xl

sm

md

xl

Opacity

sz prop	Tailwind class	Preview
{ opacity: 0 }	opacity-0
{ opacity: 50 }	opacity-50
{ opacity: 75 }	opacity-75
{ opacity: 100 }	opacity-100
{ opacity: 35 }	opacity-35

opacity — 100, 50, 25

100

50

25

Mix Blend Mode

sz prop	Tailwind class
{ mixBlend: 'multiply' }	mix-blend-multiply
{ mixBlend: 'screen' }	mix-blend-screen
{ mixBlend: 'overlay' }	mix-blend-overlay
{ mixBlend: 'normal' }	mix-blend-normal
{ bgBlend: 'multiply' }	bg-blend-multiply

Filter: Blur

sz prop	Tailwind class
{ blur: 'sm' }	blur-sm
{ blur: true }	blur
{ blur: 'md' }	blur-md
{ blur: 'lg' }	blur-lg
{ blur: 'xl' }	blur-xl
{ blur: '2xl' }	blur-2xl
{ blur: 'none' }	blur-none
{ blur: '10px' }	blur-[10px]

blur scale — none, sm, md

none

sm

md

Filter: Grayscale, Brightness, Contrast

sz prop	Tailwind class
{ grayscale: true }	grayscale
{ grayscale: 0 }	grayscale-0
{ brightness: 50 }	brightness-50
{ brightness: 110 }	brightness-110
{ contrast: 50 }	contrast-50
{ contrast: 125 }	contrast-125
{ saturate: 0 }	saturate-0
{ saturate: 150 }	saturate-150
{ invert: true }	invert
{ sepia: true }	sepia

grayscale filter — color vs grayscale

color

invert

grayscale

sepia

Filter: Hue Rotate & Drop Shadow

sz prop	Tailwind class
{ hueRotate: 90 }	hue-rotate-90
{ hueRotate: -30 }	-hue-rotate-30
{ dropShadow: 'sm' }	drop-shadow-sm
{ dropShadow: 'lg' }	drop-shadow-lg
{ dropShadow: 'none' }	drop-shadow-none
{ dropShadow: '0 0 15px rgba(45,213,151,0.5)' }	drop-shadow-[0_0_15px_rgba(45,213,151,0.5)]
{ hover: { dropShadow: '0 0 15px rgba(45,213,151,0.5)' } }	hover:drop-shadow-[0_0_15px_rgba(45,213,151,0.5)]

Backdrop Filter

sz prop	Tailwind class
{ backdropBlur: 'sm' }	backdrop-blur-sm
{ backdropBlur: 'md' }	backdrop-blur-md
{ backdropBrightness: 75 }	backdrop-brightness-75
{ backdropContrast: 125 }	backdrop-contrast-125
{ backdropGrayscale: true }	backdrop-grayscale
{ backdropSaturate: 200 }	backdrop-saturate-200

Mask

Tailwind composites mask-image from three independent layers, one per CSS custom property:

mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);

so each layer is its own sz key. They stack — a linear and a radial mask declared together compose rather than fight.

Breaking: the flat mask stop keys were removed

The old flat spellings copied the background gradient’s bare stops, which Tailwind never serves for masks (a mask stop is always scoped to its layer or edge). They now map onto the layer keys:

Before	After
{ mask: 'linear-45' }	{ maskLinear: { angle: 45 } }
{ maskFrom: '20%' }	{ maskLinear: { from: '20%' } } (or maskRadial / maskConic)
{ maskTo: '80%' }	{ maskLinear: { to: '80%' } } (or maskRadial / maskConic)
{ maskVia: '50%' }	Removed with no equivalent — Tailwind has no via stop for masks.
{ maskShape: 'circle' }	{ maskRadial: { shape: 'circle' } }

mask itself now carries only a direct mask-image: none, a url(…), a CSS variable, or an arbitrary value. The compiler warns on every removed spelling (in the browser dev console too) and names the replacement.

Linear layer

Declare either an angle or per-side edges. Both write --tw-mask-linear, so they are alternative modes; declaring both keeps whichever came later. Sides compose with each other, because each owns its own variable, and x / y simply write two.

sz prop	Tailwind class
{ maskLinear: { angle: 45 } }	mask-linear-45
{ maskLinear: { angle: -45 } }	-mask-linear-45
{ maskLinear: { angle: 45, from: '20%', to: '80%' } }	mask-linear-45 mask-linear-from-20% mask-linear-to-80%
{ maskLinear: { b: { from: '20%', to: '80%' } } }	mask-b-from-20% mask-b-to-80%
{ maskLinear: { t: { from: '0%' }, b: { from: '60%' } } }	mask-t-from-0% mask-b-from-60%
{ maskLinear: { x: { from: '20%' } } }	mask-x-from-20%

Radial and conic layers

at, size and shape each write their own variable, so they compose with the stops and with each other.

sz prop	Tailwind class
{ maskRadial: { at: 'top', shape: 'circle' } }	mask-radial-at-top mask-circle
{ maskRadial: { size: 'closest-side', from: '0%', to: '100%' } }	mask-radial-closest-side mask-radial-from-0% mask-radial-to-100%
{ maskConic: { angle: 90 } }	mask-conic-90
{ maskConic: { from: '20%', to: '80%' } }	mask-conic-from-20% mask-conic-to-80%

Gradient stops

A stop carries a position, a colour, or both — Tailwind keeps them in different custom properties, so a stop with both emits one utility for each. A scalar is a position when numeric and a colour otherwise; a bare CSS variable reads as a position, so a variable meant as a colour goes in color.

sz prop	Tailwind class
{ maskLinear: { b: { from: '20%' } } }	mask-b-from-20%
{ maskLinear: { b: { from: 'red-500' } } }	mask-b-from-red-500
{ maskLinear: { b: { from: { color: 'red-500', op: 30 } } } }	mask-b-from-red-500/30
{ maskLinear: { b: { from: { at: '20%', color: 'red-500' } } } }	mask-b-from-20% mask-b-from-red-500
{ maskLinear: { b: { from: { at: '--c' } } } }	mask-b-from-(--c)
{ maskLinear: { b: { from: { color: '--c' } } } }	mask-b-from-(color:--c)

The rest of the mask family

mask itself now carries a direct mask-image only — a gradient value belongs to its layer key.

sz prop	Tailwind class
{ mask: 'none' }	mask-none
{ mask: "url('/img.png')" }	mask-[url('/img.png')]
{ mask: '--my-mask' }	mask-(--my-mask)
{ maskSize: 'cover' }	mask-cover
{ maskSize: '50%' }	mask-size-[50%]
{ maskPos: 'top-left' }	mask-top-left
{ maskRepeat: 'space' }	mask-repeat-space
{ maskClip: 'no-clip' }	mask-no-clip
{ maskMode: 'match-source' }	mask-match
{ maskType: 'alpha' }	mask-type-alpha
{ maskComposite: 'add' }	mask-add

Examples

// Card with elevation shadow
<div sz={{
  shadow: 'lg',
  rounded: 'xl',
  p: 6,
  bg: 'white',
}} />

// Faded disabled state
<button sz={{
  opacity: 50,
  cursor: 'not-allowed',
  disabled: { opacity: 50 },
}} />

// Frosted glass panel
<div sz={{
  backdropBlur: 'md',
  bg: { color: 'white', op: 80 },
  border: 1,
  borderColor: { color: 'white', op: 40 },
}} />

// Blurred background image
<div sz={{
  position: 'relative',
}}>
  <img sz={{
    position: 'absolute',
    inset: 0,
    w: 'full',
    h: 'full',
    objectFit: 'cover',
    blur: 'xl',
  }} />
</div>