New

Stable version of Uniform CSS now officially released! Release note

Gradients

Visual reference of all default gradients.


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>