Foundations
Radius & Effects
Radius
Fluid corner radius steps and fixed rounded shapes.
--radius-xsclamp(0.125rem, calc(0.1786vw + 0.0893rem), 0.25rem)2 → 4px
--radius-smclamp(0.1875rem, calc(0.2679vw + 0.1339rem), 0.375rem)3 → 6px
--radius-mdclamp(0.25rem, calc(0.3571vw + 0.1786rem), 0.5rem)4 → 8px
--radius-lgclamp(0.375rem, calc(0.5357vw + 0.2679rem), 0.75rem)6 → 12px
--radius-xlclamp(0.5rem, calc(0.7143vw + 0.3571rem), 1rem)8 → 16px
--radius-2xlclamp(0.75rem, calc(1.0714vw + 0.5357rem), 1.5rem)12 → 24px
--radius-3xlclamp(1rem, calc(1.4286vw + 0.7143rem), 2rem)16 → 32px
--radius-full100rem1600px
Shadow
The shadow classes, 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);
Border Width
Outline thickness, from none to the thickest.
.border-noneborder-width: 0px; border-style: none;
.border-xsborder-width: 1px; border-style: var(--v4-border-style, solid);
.border-smborder-width: 2px; border-style: var(--v4-border-style, solid);
.border-mdborder-width: 3px; border-style: var(--v4-border-style, solid);
.border-lgborder-width: 4px; border-style: var(--v4-border-style, solid);
.border-xlborder-width: 5px; border-style: var(--v4-border-style, solid);
Border Style
Line styles, shown with a 4px border so each pattern is clear.
.border-solid--v4-border-style: solid; border-style: solid;
.border-dashed--v4-border-style: dashed; border-style: dashed;
.border-dotted--v4-border-style: dotted; border-style: dotted;
.border-double--v4-border-style: double; border-style: double;
.border-groove--v4-border-style: groove; border-style: groove;
.border-ridge--v4-border-style: ridge; border-style: ridge;
.border-inset--v4-border-style: inset; border-style: inset;
.border-outset--v4-border-style: outset; border-style: outset;
Opacity
How see-through an element is.
.opacity-75opacity: 0.75;
.opacity-25opacity: 0.25;
Blur & Grayscale
Filters for images and backgrounds.
.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
.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
.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
Glass & Overlays
See-through surfaces and backdrop blur, shown over a colored background.
.bg-glassbackground-color: var(--color-glass);
Aa
.bg-overlaybackground-color: var(--color-overlay);
Aa
.bg-backdropbackground-color: var(--color-backdrop);
Aa
.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
Dividers
Lines that separate content.
.divider-defaultdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-border-lighter); border-width: 0;
.divider-strongdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-border-dark); border-width: 0;
.divider-accentdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-primary); border-width: 0;
.divider-gradientdisplay: block; width: 100%; height: var(--size-divider); background-color: var(--color-transparent, transparent); border-width: 0; background: linear-gradient(90deg, var(--color-primary), var(--color-tertiary));
.divider-dasheddisplay: block; width: 100%; height: 0; background-color: var(--color-transparent, transparent); border-width: 0; border-top-width: var(--size-divider); border-top-style: dashed; border-top-color: var(--color-border-light);
.divider-verticaldisplay: block; width: var(--size-divider); height: auto; background-color: var(--color-border-lighter); border-width: 0; align-self: stretch;
NextAliasesExplore aliases variables and their default values.
