Class Reference
Effects
Class Reference
Effects
Opacity, blending, transforms, transitions, filters and shadows.
How to use
Add only the effects the element needs. Filter utilities use internal CSS variables so several filters can be combined without replacing the complete filter declaration.
Responsive behavior
Effects are not automatically disabled on smaller screens. Hover states need a base style, and essential information should remain available without hover or animation.
Visual reference
Live samples use the installed class styles and your current design variables.
Opacity
How see-through an element is.
.opacity-0opacity: 0
Aa
.opacity-25opacity: 0.25
Aa
.opacity-50opacity: 0.5
Aa
.opacity-75opacity: 0.75
Aa
.opacity-100opacity: 1
Aa
Blend modes
How the sample blends with the surface behind it.
.blend-normalmix-blend-mode: normal
Aa
.blend-multiplymix-blend-mode: multiply
Aa
.blend-screenmix-blend-mode: screen
Aa
.blend-overlaymix-blend-mode: overlay
Aa
.blend-darkenmix-blend-mode: darken
Aa
.blend-lightenmix-blend-mode: lighten
Aa
.blend-differencemix-blend-mode: difference
Aa
Motion & transitions
Utilities for transition duration, easing and the properties that animate.
.duration-fasttransition-duration: 150ms
Aa
.duration-normaltransition-duration: 200ms
Aa
.duration-slowtransition-duration: 300ms
Aa
.duration-slowertransition-duration: 500ms
Aa
.ease-lineartransition-timing-function: linear
Aa
.ease-intransition-timing-function: ease-in
Aa
.ease-outtransition-timing-function: ease-out
Aa
.ease-in-outtransition-timing-function: ease-in-out
Aa
.transition-nonetransition-property: none
Aa
.transition-colorstransition-property: color, background-color, border-color
Aa
.transition-opacitytransition-property: opacity
Aa
.transition-transformtransition-property: transform, translate, rotate, scale
Aa
.transition-shadowtransition-property: box-shadow
Aa
Transforms
Scale, rotation, movement and transform origins. Origin samples rotate on hover.
.scale-90scale: 0.9
Aa
.scale-95scale: 0.95
Aa
.scale-100scale: 1
Aa
.scale-105scale: 1.05
Aa
.scale-110scale: 1.1
Aa
.rotate-0rotate: 0deg
Aa
.rotate-3rotate: 3deg
Aa
.rotate-6rotate: 6deg
Aa
.rotate-negative-3rotate: -3deg
Aa
.rotate-negative-6rotate: -6deg
Aa
.translate-y-up-xstranslate: 0 calc(0px - var(--size-4xs))
Aa
.translate-y-up-smtranslate: 0 calc(0px - var(--size-3xs))
Aa
.translate-y-down-xstranslate: 0 var(--size-4xs)
Aa
.translate-y-down-smtranslate: 0 var(--size-3xs)
Aa
.origin-centertransform-origin: center
Aa
.origin-toptransform-origin: top
Aa
.origin-bottomtransform-origin: bottom
Aa
.origin-lefttransform-origin: left
Aa
.origin-righttransform-origin: right
Aa
.transform-nonetransform: none · translate: none · rotate: none · scale: none
Aa
Filters
Blur, brightness, contrast, saturation and grayscale.
.blur-none--v4-filter-blur: 0 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.blur-sm--v4-filter-blur: var(--size-4xs) · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.blur-md--v4-filter-blur: var(--size-3xs) · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.blur-lg--v4-filter-blur: var(--size-sm) · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.brightness-75--v4-filter-brightness: 0.75 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.brightness-90--v4-filter-brightness: 0.9 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.brightness-100--v4-filter-brightness: 1 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.brightness-110--v4-filter-brightness: 1.1 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.brightness-125--v4-filter-brightness: 1.25 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.contrast-75--v4-filter-contrast: 0.75 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.contrast-100--v4-filter-contrast: 1 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.contrast-110--v4-filter-contrast: 1.1 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.contrast-125--v4-filter-contrast: 1.25 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.saturate-0--v4-filter-saturate: 0 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.saturate-75--v4-filter-saturate: 0.75 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.saturate-100--v4-filter-saturate: 1 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.saturate-125--v4-filter-saturate: 1.25 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.saturate-150--v4-filter-saturate: 1.5 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.grayscale-0--v4-filter-grayscale: 0 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.grayscale--v4-filter-grayscale: 1 · filter: blur(var(--v4-filter-blur, 0px)) brightness(var(--v4-filter-brightness, 1)) contrast(var(--v4-filter-contrast, 1)) saturate(var(--v4-filter-saturate, 1)) grayscale(var(--v4-filter-grayscale, 0))
Aa
.filter-nonefilter: none
Aa
Backdrop filters
Blur the split-color background behind the translucent sample.
.backdrop-blur-nonebackdrop-filter: blur(0)
Aa
.backdrop-blur-smbackdrop-filter: blur(var(--size-4xs))
Aa
.backdrop-blur-mdbackdrop-filter: blur(var(--size-3xs))
Aa
.backdrop-blur-lgbackdrop-filter: blur(var(--size-sm))
Aa
.backdrop-filter-nonebackdrop-filter: none
Aa
Shadows
Actual shadow values, smallest to largest.
.shadow-xsbox-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05)
.shadow-smbox-shadow: 0px 2px 6px rgba(0, 0, 0, 0.113)
.shadow-mdbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.175)
.shadow-lgbox-shadow: 0px 8px 24px rgba(0, 0, 0, 0.238)
.shadow-xlbox-shadow: 0px 12px 48px rgba(0, 0, 0, 0.3)
NextRadiusExplore radius classes and how to use them.