Skip to content

Gradients

This page lists all Gradients CSS custom properties and utility classes available in the OxyProps Framework

Text Gradients

link Text Gradients

| Gradient version | CSS Variable | Utility Class | | ---------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --- | | Brand | --o-brand-gradient | o-text-gr-brand | | 1 | --o-gradient-1 | o-text-gr-1 | | 2 | --o-gradient-2 | o-text-gr-2 | | 3 | --o-gradient-3 | o-text-gr-3 | | 4 | --o-gradient-4 | o-text-gr-4 | | 5 | --o-gradient-5 | o-text-gr-5 | | 6 | --o-gradient-6 | o-text-gr-6 | | 7 | --o-gradient-7 | o-text-gr-7 | | 8 | --o-gradient-8 | o-text-gr-8 | | 9 | --o-gradient-9 | o-text-gr-9 | | 10 | --o-gradient-10 | o-text-gr-10 | | 11 | --o-gradient-11 | o-text-gr-11 | | 12 | --o-gradient-12 | o-text-gr-12 | | 13 | --o-gradient-13 | o-text-gr-13 | | 14 | --o-gradient-14 | o-text-gr-14 | | 15 | --o-gradient-15 | o-text-gr-15 | | 16 | --o-gradient-16 | o-text-gr-16 | | 17 | --o-gradient-17 | o-text-gr-17 | | 18 | --o-gradient-18 | o-text-gr-18 | | 19 | --o-gradient-19 | o-text-gr-19 | | 20 | --o-gradient-20 | o-text-gr-20 | | 21 | --o-gradient-21 | o-text-gr-21 | | 22 | --o-gradient-22 | o-text-gr-22 | | 23 | --o-gradient-23 | o-text-gr-23 | | 24 | --o-gradient-24 | o-text-gr-24 | | 25 | --o-gradient-25 | o-text-gr-25 | | 26 | --o-gradient-26 | o-text-gr-26 | | 27 | --o-gradient-27 | o-text-gr-27 | | 28 | --o-gradient-28 | o-text-gr-28 | | 29 | --o-gradient-29 | o-text-gr-29 | | 30 | --o-gradient-30 | o-text-gr-30 | |

Text Gradients Fixed

link Text Gradients Fixed

| Gradient version | CSS Variable | Utility Class | | ---------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | --- | | Brand | --o-brand-gradient | o-text-gr-fixed-brand | | 1 | --o-gradient-1 | o-text-gr-fixed-1 | | 2 | --o-gradient-2 | o-text-gr-fixed-2 | | 3 | --o-gradient-3 | o-text-gr-fixed-3 | | 4 | --o-gradient-4 | o-text-gr-fixed-4 | | 5 | --o-gradient-5 | o-text-gr-fixed-5 | | 6 | --o-gradient-6 | o-text-gr-fixed-6 | | 7 | --o-gradient-7 | o-text-gr-fixed-7 | | 8 | --o-gradient-8 | o-text-gr-fixed-8 | | 9 | --o-gradient-9 | o-text-gr-fixed-9 | | 10 | --o-gradient-10 | o-text-gr-fixed-10 | | 11 | --o-gradient-11 | o-text-gr-fixed-11 | | 12 | --o-gradient-12 | o-text-gr-fixed-12 | | 13 | --o-gradient-13 | o-text-gr-fixed-13 | | 14 | --o-gradient-14 | o-text-gr-fixed-14 | | 15 | --o-gradient-15 | o-text-gr-fixed-15 | | 16 | --o-gradient-16 | o-text-gr-fixed-16 | | 17 | --o-gradient-17 | o-text-gr-fixed-17 | | 18 | --o-gradient-18 | o-text-gr-fixed-18 | | 19 | --o-gradient-19 | o-text-gr-fixed-19 | | 20 | --o-gradient-20 | o-text-gr-fixed-20 | | 21 | --o-gradient-21 | o-text-gr-fixed-21 | | 22 | --o-gradient-22 | o-text-gr-fixed-22 | | 23 | --o-gradient-23 | o-text-gr-fixed-23 | | 24 | --o-gradient-24 | o-text-gr-fixed-24 | | 25 | --o-gradient-25 | o-text-gr-fixed-25 | | 26 | --o-gradient-26 | o-text-gr-fixed-26 | | 27 | --o-gradient-27 | o-text-gr-fixed-27 | | 28 | --o-gradient-28 | o-text-gr-fixed-28 | | 29 | --o-gradient-29 | o-text-gr-fixed-29 | | 30 | --o-gradient-30 | o-text-gr-fixed-30 | |

Noisy Text Gradients

link Noisy Text Gradients
GradientNoiseFilterUtility CLass
111 o-text-gr-noisy-1-1-1
112 o-text-gr-noisy-1-1-2
113 o-text-gr-noisy-1-1-3
114 o-text-gr-noisy-1-1-4
115 o-text-gr-noisy-1-1-5
121 o-text-gr-noisy-1-2-1
122 o-text-gr-noisy-1-2-2
123 o-text-gr-noisy-1-2-3
124 o-text-gr-noisy-1-2-4
125 o-text-gr-noisy-1-2-5
131 o-text-gr-noisy-1-3-1
132 o-text-gr-noisy-1-3-2
133 o-text-gr-noisy-1-3-3
134 o-text-gr-noisy-1-3-4
135 o-text-gr-noisy-1-3-5
141 o-text-gr-noisy-1-4-1
142 o-text-gr-noisy-1-4-2
143 o-text-gr-noisy-1-4-3
144 o-text-gr-noisy-1-4-4
145 o-text-gr-noisy-1-4-5
151 o-text-gr-noisy-1-5-1
152 o-text-gr-noisy-1-5-2
153 o-text-gr-noisy-1-5-3
154 o-text-gr-noisy-1-5-4
155 o-text-gr-noisy-1-5-5
211 o-text-gr-noisy-2-1-1
212 o-text-gr-noisy-2-1-2
213 o-text-gr-noisy-2-1-3
214 o-text-gr-noisy-2-1-4
215 o-text-gr-noisy-2-1-5
221 o-text-gr-noisy-2-2-1
222 o-text-gr-noisy-2-2-2
223 o-text-gr-noisy-2-2-3
224 o-text-gr-noisy-2-2-4
225 o-text-gr-noisy-2-2-5
231 o-text-gr-noisy-2-3-1

Etc.

Noisy Text Gradients Fixed

link Noisy Text Gradients Fixed
GradientNoiseFilterUtility CLass
111 o-text-gr-noisy-fixed-1-1-1
112 o-text-gr-noisy-fixed-1-1-2
113 o-text-gr-noisy-fixed-1-1-3
114 o-text-gr-noisy-fixed-1-1-4
115 o-text-gr-noisy-fixed-1-1-5
121 o-text-gr-noisy-fixed-1-2-1
122 o-text-gr-noisy-fixed-1-2-2
123 o-text-gr-noisy-fixed-1-2-3
124 o-text-gr-noisy-fixed-1-2-4
125 o-text-gr-noisy-fixed-1-2-5
131 o-text-gr-noisy-fixed-1-3-1
132 o-text-gr-noisy-fixed-1-3-2
133 o-text-gr-noisy-fixed-1-3-3
134 o-text-gr-noisy-fixed-1-3-4
135 o-text-gr-noisy-fixed-1-3-5
141 o-text-gr-noisy-fixed-1-4-1
142 o-text-gr-noisy-fixed-1-4-2
143 o-text-gr-noisy-fixed-1-4-3
144 o-text-gr-noisy-fixed-1-4-4
145 o-text-gr-noisy-fixed-1-4-5
151 o-text-gr-noisy-fixed-1-5-1
152 o-text-gr-noisy-fixed-1-5-2
153 o-text-gr-noisy-fixed-1-5-3
154 o-text-gr-noisy-fixed-1-5-4
155 o-text-gr-noisy-fixed-1-5-5
211 o-text-gr-noisy-fixed-2-1-1
212 o-text-gr-noisy-fixed-2-1-2
213 o-text-gr-noisy-fixed-2-1-3
214 o-text-gr-noisy-fixed-2-1-4
215 o-text-gr-noisy-fixed-2-1-5
221 o-text-gr-noisy-fixed-2-2-1
222 o-text-gr-noisy-fixed-2-2-2
223 o-text-gr-noisy-fixed-2-2-3
224 o-text-gr-noisy-fixed-2-2-4
225 o-text-gr-noisy-fixed-2-2-5
231 o-text-gr-noisy-fixed-2-3-1

Etc.