Backgrounds
Background Gradient v1.0.9
Utilities for sets the background gradient color to an element with flexible control over color, color space and angles.
Class
| class | css |
|---|---|
bg-gradient {start-color} {start-space} {stop-color} {stop-space} {angle} | linear-gradient(var(--bg-gradient-angle), var(--bg-gradient-start-color) var(--bg-gradient-primary), var(--bg-gradient-stop-color) var(--bg-gradient-secondary)) |
| class | css | |
|---|---|---|
| start/stop-charcoal-100 | --bg-gradient-start/stop-color: #222c35 | |
| start/stop-charcoal-200 | --bg-gradient-start/stop-color: #1f2831 | |
| start/stop-charcoal-300 | --bg-gradient-start/stop-color: #1c252c | |
| start/stop-charcoal-400 | --bg-gradient-start/stop-color: #192127 | |
| start/stop-charcoal-500 | --bg-gradient-start/stop-color: #161d22 | |
| start/stop-charcoal-600 | --bg-gradient-start/stop-color: #13181d | |
| start/stop-charcoal-700 | --bg-gradient-start/stop-color: #101419 | |
| start/stop-charcoal-800 | --bg-gradient-start/stop-color: #0d1014 | |
| start/stop-charcoal-900 | --bg-gradient-start/stop-color: #0a0c0f | |
| start/stop-gray-100 | --bg-gradient-start/stop-color: #f7fafc | |
| start/stop-gray-200 | --bg-gradient-start/stop-color: #edf2f7 | |
| start/stop-gray-300 | --bg-gradient-start/stop-color: #e2e8f0 | |
| start/stop-gray-400 | --bg-gradient-start/stop-color: #cbd5e0 | |
| start/stop-gray-500 | --bg-gradient-start/stop-color: #a0aec0 | |
| start/stop-gray-600 | --bg-gradient-start/stop-color: #718096 | |
| start/stop-gray-700 | --bg-gradient-start/stop-color: #4a5568 | |
| start/stop-gray-800 | --bg-gradient-start/stop-color: #2d3748 | |
| start/stop-gray-900 | --bg-gradient-start/stop-color: #1a202c | |
| start/stop-red-100 | --bg-gradient-start/stop-color: #fff5f5 | |
| start/stop-red-200 | --bg-gradient-start/stop-color: #fed7d7 | |
| start/stop-red-300 | --bg-gradient-start/stop-color: #feb2b2 | |
| start/stop-red-400 | --bg-gradient-start/stop-color: #fc8181 | |
| start/stop-red-500 | --bg-gradient-start/stop-color: #f56565 | |
| start/stop-red-600 | --bg-gradient-start/stop-color: #e53e3e | |
| start/stop-red-700 | --bg-gradient-start/stop-color: #c53030 | |
| start/stop-red-800 | --bg-gradient-start/stop-color: #9b2c2c | |
| start/stop-red-900 | --bg-gradient-start/stop-color: #742a2a | |
| start/stop-orange-100 | --bg-gradient-start/stop-color: #fffaf0 | |
| start/stop-orange-200 | --bg-gradient-start/stop-color: #feebc8 | |
| start/stop-orange-300 | --bg-gradient-start/stop-color: #fbd38d | |
| start/stop-orange-400 | --bg-gradient-start/stop-color: #f6ad55 | |
| start/stop-orange-500 | --bg-gradient-start/stop-color: #ed8936 | |
| start/stop-orange-600 | --bg-gradient-start/stop-color: #dd6b20 | |
| start/stop-orange-700 | --bg-gradient-start/stop-color: #c05621 | |
| start/stop-orange-800 | --bg-gradient-start/stop-color: #9c4221 | |
| start/stop-orange-900 | --bg-gradient-start/stop-color: #7b341e | |
| start/stop-green-100 | --bg-gradient-start/stop-color: #f0fff4 | |
| start/stop-green-200 | --bg-gradient-start/stop-color: #c6f6d5 | |
| start/stop-green-300 | --bg-gradient-start/stop-color: #9ae6b4 | |
| start/stop-green-400 | --bg-gradient-start/stop-color: #68d391 | |
| start/stop-green-500 | --bg-gradient-start/stop-color: #48bb78 | |
| start/stop-green-600 | --bg-gradient-start/stop-color: #38a169 | |
| start/stop-green-700 | --bg-gradient-start/stop-color: #2f855a | |
| start/stop-green-800 | --bg-gradient-start/stop-color: #276749 | |
| start/stop-green-900 | --bg-gradient-start/stop-color: #22543d | |
| start/stop-teal-100 | --bg-gradient-start/stop-color: #e6fffa | |
| start/stop-teal-200 | --bg-gradient-start/stop-color: #b2f5ea | |
| start/stop-teal-300 | --bg-gradient-start/stop-color: #81e6d9 | |
| start/stop-teal-400 | --bg-gradient-start/stop-color: #4fd1c5 | |
| start/stop-teal-500 | --bg-gradient-start/stop-color: #38b2ac | |
| start/stop-teal-600 | --bg-gradient-start/stop-color: #319795 | |
| start/stop-teal-700 | --bg-gradient-start/stop-color: #2c7a7b | |
| start/stop-teal-800 | --bg-gradient-start/stop-color: #285e61 | |
| start/stop-teal-900 | --bg-gradient-start/stop-color: #234e52 | |
| start/stop-blue-100 | --bg-gradient-start/stop-color: #ebf8ff | |
| start/stop-blue-200 | --bg-gradient-start/stop-color: #bee3f8 | |
| start/stop-blue-300 | --bg-gradient-start/stop-color: #90cdf4 | |
| start/stop-blue-400 | --bg-gradient-start/stop-color: #63b3ed | |
| start/stop-blue-500 | --bg-gradient-start/stop-color: #4299e1 | |
| start/stop-blue-600 | --bg-gradient-start/stop-color: #3182ce | |
| start/stop-blue-700 | --bg-gradient-start/stop-color: #2b6cb0 | |
| start/stop-blue-800 | --bg-gradient-start/stop-color: #2c5282 | |
| start/stop-blue-900 | --bg-gradient-start/stop-color: #2a4365 | |
| start/stop-indigo-100 | --bg-gradient-start/stop-color: #ebf4ff | |
| start/stop-indigo-200 | --bg-gradient-start/stop-color: #c3dafe | |
| start/stop-indigo-300 | --bg-gradient-start/stop-color: #a3bffa | |
| start/stop-indigo-400 | --bg-gradient-start/stop-color: #7f9cf5 | |
| start/stop-indigo-500 | --bg-gradient-start/stop-color: #667eea | |
| start/stop-indigo-600 | --bg-gradient-start/stop-color: #5a67d8 | |
| start/stop-indigo-700 | --bg-gradient-start/stop-color: #4c51bf | |
| start/stop-indigo-800 | --bg-gradient-start/stop-color: #434190 | |
| start/stop-indigo-900 | --bg-gradient-start/stop-color: #3c366b | |
| start/stop-purple-100 | --bg-gradient-start/stop-color: #faf5ff | |
| start/stop-purple-200 | --bg-gradient-start/stop-color: #e9d8fd | |
| start/stop-purple-300 | --bg-gradient-start/stop-color: #d6bcfa | |
| start/stop-purple-400 | --bg-gradient-start/stop-color: #b794f4 | |
| start/stop-purple-500 | --bg-gradient-start/stop-color: #9f7aea | |
| start/stop-purple-600 | --bg-gradient-start/stop-color: #805ad5 | |
| start/stop-purple-700 | --bg-gradient-start/stop-color: #6b46c1 | |
| start/stop-purple-800 | --bg-gradient-start/stop-color: #553c9a | |
| start/stop-purple-900 | --bg-gradient-start/stop-color: #44337a | |
| start/stop-pink-100 | --bg-gradient-start/stop-color: #fff5f7 | |
| start/stop-pink-200 | --bg-gradient-start/stop-color: #fed7e2 | |
| start/stop-pink-300 | --bg-gradient-start/stop-color: #fbb6ce | |
| start/stop-pink-400 | --bg-gradient-start/stop-color: #f687b3 | |
| start/stop-pink-500 | --bg-gradient-start/stop-color: #ed64a6 | |
| start/stop-pink-600 | --bg-gradient-start/stop-color: #d53f8c | |
| start/stop-pink-700 | --bg-gradient-start/stop-color: #b83280 | |
| start/stop-pink-800 | --bg-gradient-start/stop-color: #97266d | |
| start/stop-pink-900 | --bg-gradient-start/stop-color: #702459 | |
| start/stop-khaki-100 | --bg-gradient-start/stop-color: #f9f7f4 | |
| start/stop-khaki-200 | --bg-gradient-start/stop-color: #f0ebe4 | |
| start/stop-khaki-300 | --bg-gradient-start/stop-color: #e7dfd3 | |
| start/stop-khaki-400 | --bg-gradient-start/stop-color: #d5c8b2 | |
| start/stop-khaki-500 | --bg-gradient-start/stop-color: #c3b091 | |
| start/stop-khaki-600 | --bg-gradient-start/stop-color: #b09e83 | |
| start/stop-khaki-700 | --bg-gradient-start/stop-color: #756a57 | |
| start/stop-khaki-800 | --bg-gradient-start/stop-color: #584f41 | |
| start/stop-khaki-900 | --bg-gradient-start/stop-color: #3b352c | |
| start/stop-amber-100 | --bg-gradient-start/stop-color: #fff9e6 | |
| start/stop-amber-200 | --bg-gradient-start/stop-color: #fff0bf | |
| start/stop-amber-300 | --bg-gradient-start/stop-color: #ffe799 | |
| start/stop-amber-400 | --bg-gradient-start/stop-color: #ffd54d | |
| start/stop-amber-500 | --bg-gradient-start/stop-color: #ffc300 | |
| start/stop-amber-600 | --bg-gradient-start/stop-color: #e6b000 | |
| start/stop-amber-700 | --bg-gradient-start/stop-color: #997500 | |
| start/stop-amber-800 | --bg-gradient-start/stop-color: #735800 | |
| start/stop-amber-900 | --bg-gradient-start/stop-color: #4d3b00 | |
| start/stop-nero-100 | --bg-gradient-start/stop-color: #e9e9e9 | |
| start/stop-nero-200 | --bg-gradient-start/stop-color: #c7c8c9 | |
| start/stop-nero-300 | --bg-gradient-start/stop-color: #a6a7a8 | |
| start/stop-nero-400 | --bg-gradient-start/stop-color: #636466 | |
| start/stop-nero-500 | --bg-gradient-start/stop-color: #202225 | |
| start/stop-nero-600 | --bg-gradient-start/stop-color: #1d1f21 | |
| start/stop-nero-700 | --bg-gradient-start/stop-color: #131416 | |
| start/stop-nero-800 | --bg-gradient-start/stop-color: #0e0f11 | |
| start/stop-nero-900 | --bg-gradient-start/stop-color: #0a0a0b |
| class | css |
|---|---|
| start-10 | --bg-gradient-primary: 10% |
| start-20 | --bg-gradient-primary: 20% |
| start-30 | --bg-gradient-primary: 30% |
| start-40 | --bg-gradient-primary: 40% |
| start-50 | --bg-gradient-primary: 50% |
| start-60 | --bg-gradient-primary: 60% |
| start-70 | --bg-gradient-primary: 70% |
| start-80 | --bg-gradient-primary: 80% |
| start-90 | --bg-gradient-primary: 90% |
| class | css |
|---|---|
| stop-10 | --bg-gradient-secondary: 10% |
| stop-20 | --bg-gradient-secondary: 20% |
| stop-30 | --bg-gradient-secondary: 30% |
| stop-40 | --bg-gradient-secondary: 40% |
| stop-50 | --bg-gradient-secondary: 50% |
| stop-60 | --bg-gradient-secondary: 60% |
| stop-70 | --bg-gradient-secondary: 70% |
| stop-80 | --bg-gradient-secondary: 80% |
| stop-90 | --bg-gradient-secondary: 90% |
| class | css |
|---|---|
| angle-0 | --bg-gradient-angle: 0deg |
| angle-45 | --bg-gradient-angle: 45deg |
| angle-90 | --bg-gradient-angle: 90deg |
| angle-180 | --bg-gradient-angle: 180deg |
| -angle-45 | --bg-gradient-angle: -45deg |
| -angle-90 | --bg-gradient-angle: -90deg |
| -angle-180 | --bg-gradient-angle: -180deg |
Usage
Set basic background gradient to an element, start color is start-{color} with 10% space start-{value}, stop color is stop-{color} with 90% space stop-{value}, last rotate the gradient in 45 degree angel-45.
<!-- Example -->
<y class="bg-gradient start-amber-400 start-10 stop-red-400 stop-90 angle-45">
...
</y>Set background gradient to <body> tag.
<!-- Example -->
<body class="bg-gradient start-amber-400 start-10 stop-red-400 stop-90 angle-45">
...
</body>v1.1.1 Set background gradient clipping as text color by adding clip-text.
<!-- Example -->
<y class="bg-gradient start-amber-400 start-10 stop-red-400 stop-90 angle-45 clip-text ... inline-block">
...
</y>Customization
Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.
// Add Values
@include yogurt(
$class: 'bg-gradient.angle',
$property: --bg-gradient-angle,
$modifier: (
270: 270deg
//...
)
);
@include yogurt(
$class: 'bg-gradient.start',
$property: --bg-gradient-primary,
$modifier: (
15: 15%,
25: 25%
//...
)
);
@include yogurt(
$class: 'bg-gradient.stop',
$property: --bg-gradient-secondary,
$modifier: (
15: 15%,
25: 25%
//...
)
);
@include yogurt(
$class: 'bg-gradient.start-gray',
$property: --bg-gradient-start-color,
$modifier: (
100: #262626,
200: #252525
//...
)
);
@include yogurt(
$class: 'bg-gradient.stop-gray',
$property: --bg-gradient-stop-color,
$modifier: (
100: #262626,
200: #252525
//...
)
);
// Add Variants
@include yogurt(
$class: 'bg-gradient.angle',
$property: --bg-gradient-angle,
$modifier: (
270: 270deg
//...
),
$variant: (
'hover',
'focus-within',
'focus-visible'
//...
)
);Variant
Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.