New

Stable version of Uniform CSS now officially released! Release note

Opacities

Learn how to customize opacity levels.


Opacities

The opacities setting controls the levels for opacity related properties such as opacity, background-opacity, border-opacity, color-opacity.


Default Opacities

The following default opacities configurations are applied. To see a visual reference of each opacity, visit Cheatsheet.

@use "uniform" as * with (
$config: (
opacities: (
0: 0,
2: 0.02,
4: 0.04,
6: 0.06,
8: 0.08,
10: 0.1,
15: 0.15,
20: 0.2,
25: 0.25,
30: 0.3,
35: 0.35,
40: 0.4,
45: 0.45,
50: 0.5,
55: 0.55,
60: 0.6,
65: 0.65,
70: 0.7,
75: 0.75,
80: 0.8,
85: 0.85,
90: 0.9,
95: 0.95,
100: 1,
),
)
);

Customizing via Sass

To customize opacities, pass in key value pairs to the opacities map in your configuration. Customizations will be universally applied across all opacity related properties.

// main.scss
@use "uniform" as * with (
$config: (
opacities: (
opaque: 0.78
),
)
);
/* main.css */
.opacity-opaque {
opacity-opaque: 0.78;
}
.bg-opacity-opaque {
--bg-opacity: 0.78;
}
.color-opacity-opaque {
--color-opacity: 0.78;
}
.border-opacity-opaque {
--border-opacity: 0.78;
}
...

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: (
opacities: null,

extend: (
opacities: (
opaque: 0.78
)
)
)
)