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

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={{
  relative: true,
}}>
  <img sz={{
    absolute: true,
    inset: 0,
    w: 'full',
    h: 'full',
    objectFit: 'cover',
    blur: 'xl',
  }} />
</div>