Background gradient
Used to add background gradient effects for elements
Usage
Add background-gradient-* class to block element.
<div class="background-gradient-0deg background-gradient-from-dark background-gradient-to-transparent">
// Your content
</div>
See implementation in background component.
Classes
| Class | Value |
|---|---|
background-gradient-0deg | |
background-gradient-15deg | |
background-gradient-30deg | |
background-gradient-45deg | |
background-gradient-60deg | |
background-gradient-75deg | |
background-gradient-90deg | |
background-gradient-from-transparent | |
background-gradient-from-primary | |
background-gradient-from-primary-light | |
background-gradient-from-primary-dark | |
background-gradient-from-secondary | |
background-gradient-from-secondary-light | |
background-gradient-from-secondary-dark | |
background-gradient-from-dark | |
background-gradient-from-light | |
background-gradient-from-gray | |
background-gradient-from-gray-light | |
background-gradient-from-gray-dark | |
background-gradient-from-success | |
background-gradient-from-warning | |
background-gradient-from-error | |
background-gradient-from-background | |
background-gradient-from-background-light | |
background-gradient-from-background-dark | |
background-gradient-to-transparent | |
background-gradient-to-primary | |
background-gradient-to-primary-light | |
background-gradient-to-primary-dark | |
background-gradient-to-secondary | |
background-gradient-to-secondary-light | |
background-gradient-to-secondary-dark | |
background-gradient-to-dark | |
background-gradient-to-light | |
background-gradient-to-gray | |
background-gradient-to-gray-light | |
background-gradient-to-gray-dark | |
background-gradient-to-success | |
background-gradient-to-warning | |
background-gradient-to-error | |
background-gradient-to-background | |
background-gradient-to-background-light | |
background-gradient-to-background-dark | |
background-gradient-from-0 | 0% |
background-gradient-from-1/1 | 100% |
background-gradient-from-1/2 | 50% |
background-gradient-from-1/3 | 33.33% |
background-gradient-from-2/3 | 66.66% |
background-gradient-from-1/4 | 25% |
background-gradient-from-3/4 | 75% |
background-gradient-from-1/5 | 20% |
background-gradient-from-2/5 | 40% |
background-gradient-from-3/5 | 60% |
background-gradient-from-4/5 | 80% |
background-gradient-from-1/6 | 16.66% |
background-gradient-to-0 | 0% |
background-gradient-to-1/1 | 100% |
background-gradient-to-1/2 | 50% |
background-gradient-to-1/3 | 33.33% |
background-gradient-to-2/3 | 66.66% |
background-gradient-to-1/4 | 25% |
background-gradient-to-3/4 | 75% |
background-gradient-to-1/5 | 20% |
background-gradient-to-2/5 | 40% |
background-gradient-to-3/5 | 60% |
background-gradient-to-4/5 | 80% |
background-gradient-to-1/6 | 16.66% |
Add
@s,@m, or@lsuffix to support breakpoints