Visual Reference
The following table visually represents all the gradients that are available.
| Reference | Class | Gradient |
|---|---|---|
bg-linear |
linear-gradient(var(--linear-gradient, to right, #40C6FF 0%, #505BED 100%)) |
|
bg-radial |
radial-gradient(var(--radial-gradient, circle at 50% 50%, #40c6ff, #505bed)) |
|
bg-conic |
conic-gradient(var(--conic-gradient, from 90deg at 50% 50%, #40c6ff, #505bed)) |
|
bg-linear-x-from-white |
linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%)` |
|
bg-linear-x-to-white |
linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%) |
|
bg-linear-y-from-white |
linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%) |
|
bg-linear-y-to-white |
linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%) |
|
bg-linear-x-from-black |
linear-gradient(to right, black 0%, rgba(0, 0, 0, 0) 100%) |
|
bg-linear-x-to-black |
linear-gradient(to right, rgba(0, 0, 0, 0) 0%, black 100%) |
|
bg-linear-y-from-black |
linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%) |
|
bg-linear-y-to-black |
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%) |
Basic Usage
Combine shade properties to any color property to change the lightness of the color.
<div class="bg-linear-y-from-white ...">
...
</div>