Effects

Utilities for controlling opacity, box shadows, blur, and backdrop blur filters.

Opacity

Use opacity-{value} to control the opacity of an element.

Class	CSS Property
`opacity-0`	opacity: 0
`opacity-25`	opacity: 0.25
`opacity-50`	opacity: 0.5
`opacity-75`	opacity: 0.75
`opacity-100`	opacity: 1

Example

100

<div class="bg-blue-500 opacity-100">...</div>
<div class="bg-blue-500 opacity-75">...</div>
<div class="bg-blue-500 opacity-50">...</div>
<div class="bg-blue-500 opacity-25">...</div>

Box Shadow

Use shadow-{size} to add box shadows to elements.

Class	CSS Property
`shadow-sm`	box-shadow: var(--shadow-sm)
`shadow`	box-shadow: var(--shadow)
`shadow-md`	box-shadow: var(--shadow-md)
`shadow-lg`	box-shadow: var(--shadow-lg)
`shadow-xl`	box-shadow: var(--shadow-xl)
`shadow-none`	box-shadow: var(--shadow-none)

Example

default

<div class="shadow-sm rounded-lg p-6">Small shadow</div>
<div class="shadow-md rounded-lg p-6">Medium shadow</div>
<div class="shadow-xl rounded-lg p-6">Extra-large shadow</div>

Blur

Use blur-{size} to apply a blur filter to an element.

Class	CSS Property
`blur-sm`	filter: blur(4px)
`blur`	filter: blur(8px)

Example

Sharp

no blur

Soft

blur-sm

Blurry

blur

<div class="blur-sm">Slightly blurred</div>
<div class="blur">More blurred</div>

Backdrop Blur

Use backdrop-blur-{size} to blur the content behind an element. Commonly used for frosted-glass overlays.

Class	CSS Property
`backdrop-blur-sm`	backdrop-filter: blur(4px)
`backdrop-blur`	backdrop-filter: blur(8px)

Example

Background Content

Frosted glass overlay with backdrop-blur

<div class="relative">
  <div class="bg-gradient-to-r from-blue-500 to-purple-500 p-6">
    Background content
  </div>
  <div class="absolute inset-x-0 bottom-0 backdrop-blur bg-white/25 p-4">
    Frosted glass overlay
  </div>
</div>