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%)
      )
    )
  )
)