# Gradients > Use gradient utilities to build directional color backgrounds with from, via, and to color stops. Create directional gradients with utility classes. Source: https://docs.tabler.io/ui/utilities/gradients --- export const colors = [...Object.keys(site.colors), 'white'] ## Default gradient Use `.bg-gradient` to enable gradient background rendering on an element. Then combine it with color stop utilities to define the final look. A stop you do not set stays transparent, so a single `from` color already fades out. ```html
``` ```html
``` ## Gradient directions Use direction utilities to control gradient flow: - `.bg-gradient-to-t` - `.bg-gradient-to-te` - `.bg-gradient-to-e` - `.bg-gradient-to-be` - `.bg-gradient-to-b` - `.bg-gradient-to-bs` - `.bg-gradient-to-s` - `.bg-gradient-to-ts` ```html
.bg-gradient-to-t
.bg-gradient-to-te
.bg-gradient-to-e
.bg-gradient-to-be
.bg-gradient-to-b
.bg-gradient-to-bs
.bg-gradient-to-s
.bg-gradient-to-ts
``` ```html
...
...
...
...
...
...
...
...
``` ## Gradient color stops Use color stop utilities to control where a gradient starts, transitions, and ends. You can choose any color from [full list of available colors](/ui/base/colors). Here is a list of classes: - `.bg-gradient-from-{color}` - `.bg-gradient-via-{color}` (optional middle stop for smoother blending) - `.bg-gradient-to-{color}` ```html
.bg-gradient-from-purple .bg-gradient-to-transparent
.bg-gradient-from-pink .bg-gradient-via-orange .bg-gradient-to-yellow
``` ```html
...
...
``` ## Available colors You can use any project color token with `from`, `via`, and `to` utilities. See the [full list of available colors](/ui/base/colors) for all color names. ```html
.bg-gradient-from-blue
.bg-gradient-from-azure
.bg-gradient-from-indigo
.bg-gradient-from-purple
.bg-gradient-from-pink
.bg-gradient-from-red
.bg-gradient-from-orange
.bg-gradient-from-yellow
.bg-gradient-from-lime
.bg-gradient-from-green
.bg-gradient-from-teal
.bg-gradient-from-cyan
.bg-gradient-from-white
``` ```html
...
...
...
...
...
...
...
...
...
...
...
...
...
``` ## Examples ### Card header gradient Use gradient utilities on card sections to highlight key content areas. ```html

Performance

Weekly trend overview

Card content

``` ### Badge-like highlight Use short gradients on compact UI elements for subtle emphasis. ```html
Success trend Warning trend New feature
``` ## Accessibility - Text on a gradient has to pass contrast at every point of it, not only in the middle. Check the lightest end. - A gradient is decoration. Do not use one as the only mark of a state or a category. - When a gradient sits behind text, add an overlay instead of hoping the photo is dark enough - that is what `card-img-overlay-dark` does. - Animated gradients keep moving. Stop them under `prefers-reduced-motion`.