New

Uniform CSS v1.2 released with new localized important and JSON output mode! Release note

Gradients

Learn how to customize gradients.


About Gradients

Uniform provides inline gradient support using the bg-linear utility. You can also add your own gradients using the gradients theme setting in your configuration.


Applying Inline Gradient

To apply inline gradients, add the class bg-linear, bg-radial, or bg-conic to any element and override the --<type>-gradient CSS variable with your gradient value.

<div class="bg-linear" style="--linear-gradient: to right, #40C6FF 0%, #505BED 100%;">
...
</div>

<div class="bg-radial" style="--radial-gradient: circle at 50% 50%, #40c6ff, #505bed;">
...
</div>

<div class="bg-conic" style="--conic-gradient: from 90deg at 50% 50%, #40c6ff, #505bed;">
...
</div>

Default Gradients

The following default gradients are applied. To see a more visual reference of all the gradients, visit Cheatsheet.

@use "uniform" as * with (
$config: (
gradients: (
linear: linear-gradient(var(--gradient, to right, #40C6FF 0%, #505BED 100%)),
radial: radial-gradient(var(--gradient, circle at 50% 50%, #40c6ff, #505bed)),
conic: conic-gradient(var(--gradient, from 90deg at 50% 50%, #40c6ff, #505bed)),
gradient-x-from-white: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%),
gradient-x-to-white: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%),
gradient-y-from-white: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%),
gradient-y-to-white: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%),
gradient-x-from-black: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
gradient-x-to-black: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%),
gradient-y-from-black: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),
gradient-y-to-black: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%),
)
)
);

Customizing via Sass

You can add your own gradients by passing in key value pairs to the gradients map in your configuration.

// main.scss

@use "uniform" as * with (
$config: (
gradients: (
custom-gradient: linear-gradient(to right, red 0%, blue 100%)
)
)
);
/* main.css */

.bg-custom-gradient {
background: linear-gradient(to right, red 0%, blue 100%);
}

Customizing via CDN

If you are using the precompiled version of Uniform, you can customize theme properties by overriding predefined CSS variables.

/* main.css */

:root {
--linear: linear-gradient(to right, #40C6FF 0%, #505BED 100%);
--radial: radial-gradient(circle at 50% 50%, #40c6ff, #505bed);
--conic: conic-gradient(from 90deg at 50% 50%, #40c6ff, #505bed);
}

Disabling Defaults

If you wish to remove defaults, pass null to any theme property. Additionally, you can add your own by assigning theme settings to the extend map.

@use "uniform" as * with (
$config: (
gradients: null,

extend: (
gradients: (
custom: linear-gradient(to right, #40C6FF 0%, #505BED 100%)
)
)
)
)