Background

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

classcss
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))
Note: Your browser does not currently support the utilities.
classcss
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
classcss
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%
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%
classcss
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.

TEXT
<!-- Example -->
<y class="bg-gradient start-amber-400 start-10 stop-red-400 stop-90 angle-45 clip-text ... inline-block">
...
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'angle',
//variant: 'responsive',
property: '--bg-gradient-angle',
modifier: (
'270': '270deg'
//...
)
),
(
utility: 'start',
//variant: 'responsive',
property: '--bg-gradient-primary',
modifier: (
'15': '15%',
'25': '25%'
//...
)
),
(
utility: 'Stop',
//variant: 'responsive',
property: '--bg-gradient-secondary',
modifier: (
'15': '15%',
'25': '25%'
//...
)
),
(
utility: 'start-red',
//variant: 'responsive',
property: '--bg-gradient-start-color',
modifier: (
'100': '#...',
'200': '#...'
//...
)
),
(
utility: 'stop-green',
//variant: 'responsive',
property: '--bg-gradient-stop-color',
modifier: (
'100': '#...',
'200': '#...'
//...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hoverYes
group-hover
focus
focus-visibleYes
focus-withinYes
active
visited
checked
disabled