OxyProps Gradients
As props or classes, access 30 (and growing) carefully hand made color gradients
All the gradients
The prop:
--o-gradient-1
The classes:
o-bg-gr-1
o-text-gr-1
o-text-gr-fixed-1
--o-gradient-1
The classes:
o-bg-gr-1
o-text-gr-1
o-text-gr-fixed-1
The prop:
--o-gradient-2
The classes:
o-bg-gr-2
o-text-gr-2
o-text-gr-fixed-2
--o-gradient-2
The classes:
o-bg-gr-2
o-text-gr-2
o-text-gr-fixed-2
The prop:
--o-gradient-3
The classes:
o-bg-gr-3
o-text-gr-3
o-text-gr-fixed-3
--o-gradient-3
The classes:
o-bg-gr-3
o-text-gr-3
o-text-gr-fixed-3
The prop:
--o-gradient-4
The classes:
o-bg-gr-4
o-text-gr-4
o-text-gr-fixed-4
--o-gradient-4
The classes:
o-bg-gr-4
o-text-gr-4
o-text-gr-fixed-4
The prop:
--o-gradient-5
The classes:
o-bg-gr-5
o-text-gr-5
o-text-gr-fixed-5
--o-gradient-5
The classes:
o-bg-gr-5
o-text-gr-5
o-text-gr-fixed-5
The prop:
--o-gradient-6
The classes:
o-bg-gr-6
o-text-gr-6
o-text-gr-fixed-6
--o-gradient-6
The classes:
o-bg-gr-6
o-text-gr-6
o-text-gr-fixed-6
The prop:
--o-gradient-7
The classes:
o-bg-gr-7
o-text-gr-7
o-text-gr-fixed-7
--o-gradient-7
The classes:
o-bg-gr-7
o-text-gr-7
o-text-gr-fixed-7
The prop:
--o-gradient-8
The classes:
o-bg-gr-8
o-text-gr-8
o-text-gr-fixed-8
--o-gradient-8
The classes:
o-bg-gr-8
o-text-gr-8
o-text-gr-fixed-8
The prop:
--o-gradient-9
The classes:
o-bg-gr-9
o-text-gr-9
o-text-gr-fixed-9
--o-gradient-9
The classes:
o-bg-gr-9
o-text-gr-9
o-text-gr-fixed-9
The prop:
--o-gradient-10
The classes:
o-bg-gr-10
o-text-gr-10
o-text-gr-fixed-10
--o-gradient-10
The classes:
o-bg-gr-10
o-text-gr-10
o-text-gr-fixed-10
The prop:
--o-gradient-11
The classes:
o-bg-gr-11
o-text-gr-11
o-text-gr-fixed-11
--o-gradient-11
The classes:
o-bg-gr-11
o-text-gr-11
o-text-gr-fixed-11
The prop:
--o-gradient-12
The classes:
o-bg-gr-12
o-text-gr-12
o-text-gr-fixed-12
--o-gradient-12
The classes:
o-bg-gr-12
o-text-gr-12
o-text-gr-fixed-12
The prop:
--o-gradient-13
The classes:
o-bg-gr-13
o-text-gr-13
o-text-gr-fixed-13
--o-gradient-13
The classes:
o-bg-gr-13
o-text-gr-13
o-text-gr-fixed-13
The prop:
--o-gradient-14
The classes:
o-bg-gr-14
o-text-gr-14
o-text-gr-fixed-14
--o-gradient-14
The classes:
o-bg-gr-14
o-text-gr-14
o-text-gr-fixed-14
The prop:
--o-gradient-15
The classes:
o-bg-gr-15
o-text-gr-15
o-text-gr-fixed-15
--o-gradient-15
The classes:
o-bg-gr-15
o-text-gr-15
o-text-gr-fixed-15
The prop:
--o-gradient-16
The classes:
o-bg-gr-16
o-text-gr-16
o-text-gr-fixed-16
--o-gradient-16
The classes:
o-bg-gr-16
o-text-gr-16
o-text-gr-fixed-16
The prop:
--o-gradient-17
The classes:
o-bg-gr-17
o-text-gr-17
o-text-gr-fixed-17
--o-gradient-17
The classes:
o-bg-gr-17
o-text-gr-17
o-text-gr-fixed-17
The prop:
--o-gradient-18
The classes:
o-bg-gr-18
o-text-gr-18
o-text-gr-fixed-18
--o-gradient-18
The classes:
o-bg-gr-18
o-text-gr-18
o-text-gr-fixed-18
The prop:
--o-gradient-19
The classes:
o-bg-gr-19
o-text-gr-19
o-text-gr-fixed-19
--o-gradient-19
The classes:
o-bg-gr-19
o-text-gr-19
o-text-gr-fixed-19
The prop:
--o-gradient-20
The classes:
o-bg-gr-20
o-text-gr-20
o-text-gr-fixed-20
--o-gradient-20
The classes:
o-bg-gr-20
o-text-gr-20
o-text-gr-fixed-20
The prop:
--o-gradient-21
The classes:
o-bg-gr-21
o-text-gr-21
o-text-gr-fixed-21
--o-gradient-21
The classes:
o-bg-gr-21
o-text-gr-21
o-text-gr-fixed-21
The prop:
--o-gradient-22
The classes:
o-bg-gr-22
o-text-gr-22
o-text-gr-fixed-22
--o-gradient-22
The classes:
o-bg-gr-22
o-text-gr-22
o-text-gr-fixed-22
The prop:
--o-gradient-23
The classes:
o-bg-gr-23
o-text-gr-23
o-text-gr-fixed-23
--o-gradient-23
The classes:
o-bg-gr-23
o-text-gr-23
o-text-gr-fixed-23
The prop:
--o-gradient-24
The classes:
o-bg-gr-24
o-text-gr-24
o-text-gr-fixed-24
--o-gradient-24
The classes:
o-bg-gr-24
o-text-gr-24
o-text-gr-fixed-24
The prop:
--o-gradient-25
The classes:
o-bg-gr-25
o-text-gr-25
o-text-gr-fixed-25
--o-gradient-25
The classes:
o-bg-gr-25
o-text-gr-25
o-text-gr-fixed-25
The prop:
--o-gradient-26
The classes:
o-bg-gr-26
o-text-gr-26
o-text-gr-fixed-26
--o-gradient-26
The classes:
o-bg-gr-26
o-text-gr-26
o-text-gr-fixed-26
The prop:
--o-gradient-27
The classes:
o-bg-gr-27
o-text-gr-27
o-text-gr-fixed-27
--o-gradient-27
The classes:
o-bg-gr-27
o-text-gr-27
o-text-gr-fixed-27
The prop:
--o-gradient-28
The classes:
o-bg-gr-28
o-text-gr-28
o-text-gr-fixed-28
--o-gradient-28
The classes:
o-bg-gr-28
o-text-gr-28
o-text-gr-fixed-28
The prop:
--o-gradient-29
The classes:
o-bg-gr-29
o-text-gr-29
o-text-gr-fixed-29
--o-gradient-29
The classes:
o-bg-gr-29
o-text-gr-29
o-text-gr-fixed-29
The prop:
--o-gradient-30
The classes:
o-bg-gr-30
o-text-gr-30
o-text-gr-fixed-30
--o-gradient-30
The classes:
o-bg-gr-30
o-text-gr-30
o-text-gr-fixed-30
Or use them as backgrounds or texts
I am a very cool text gradient
o-text-gr-fixed-1
I am another fancy text gradient
o-text-gr-18
--o-gradient-3
Add noise and filters for extra visual effects
The 5 noises with no additional effects
The Prop:
--o-noise-1
--o-noise-1
The Prop:
--o-noise-2
--o-noise-2
The Prop:
--o-noise-3
--o-noise-3
The Prop:
--o-noise-4
--o-noise-4
The Prop:
--o-noise-5
--o-noise-5
The 5 levels of filter (with gradient 18 & noise 3 for the demo)
The Prop:
--o-noise-filter-1
--o-noise-filter-1
The Prop:
--o-noise-filter-2
--o-noise-filter-2
The Prop:
--o-noise-filter-3
--o-noise-filter-3
The Prop:
--o-noise-filter-4
--o-noise-filter-4
The Prop:
--o-noise-filter-5
--o-noise-filter-5
A few examples of combinations used as backgrounds
The class:
o-bg-gr-noisy-13-3-1
Or as props
background-image:
var(--o-gradient-13),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
o-bg-gr-noisy-13-3-1
Or as props
background-image:
var(--o-gradient-13),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
The class:
o-bg-gr-noisy-30-3-1
Or as props
background-image:
var(--o-gradient-30),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
o-bg-gr-noisy-30-3-1
Or as props
background-image:
var(--o-gradient-30),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
The class:
o-bg-gr-noisy-6-3-1
Used with image overlay
hsl(var(--o-user-brand-9-hsl) / 40%)
Or as props
background-image:
var(--o-gradient-6),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
o-bg-gr-noisy-6-3-1
Used with image overlay
hsl(var(--o-user-brand-9-hsl) / 40%)
Or as props
background-image:
var(--o-gradient-6),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
Custom class made of props
background-image:
radial-gradient(circle at center top,
var(--o-rose-4),
hsl(var(--o-rose-10-hsl) / 50%)),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
background-image:
radial-gradient(circle at center top,
var(--o-rose-4),
hsl(var(--o-rose-10-hsl) / 50%)),
var(--o-noise-3);
filter:
var(--o-noise-filter-1);
The class:
o-bg-gr-noisy-1-2-1
Or as props
background-image:
var(--o-gradient-1),
var(--o-noise-2);
filter:
var(--o-noise-filter-1);
o-bg-gr-noisy-1-2-1
Or as props
background-image:
var(--o-gradient-1),
var(--o-noise-2);
filter:
var(--o-noise-filter-1);
The class:
o-bg-gr-noisy-10-1-5
Or as props
background-image:
var(--o-gradient-10),
var(--o-noise-1);
filter:
var(--o-noise-filter-5);
o-bg-gr-noisy-10-1-5
Or as props
background-image:
var(--o-gradient-10),
var(--o-noise-1);
filter:
var(--o-noise-filter-5);
And as texts
I am a PRESET noisy text gradient
o-text-gr-noisy-18-3-2
I am a CUSTOM noisy text gradient
background-color: black;
background-image: linear-gradient(to top,
hsl(var(--o-brand-hsl) / 70%),
hsl(var(--o-brand-hsl) / 0%)),
var(--o-noise-5);
filter: var(--noise-filter-2);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to top,
hsl(var(--o-brand-hsl) / 70%),
hsl(var(--o-brand-hsl) / 0%)),
var(--o-noise-5);
filter: var(--noise-filter-2);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;