Windi CSSGradients
Utilities for controlling background gradients.
Gradient Direction
none
gradient-to-t
gradient-to-tr
gradient-to-r
gradient-to-br
gradient-to-b
gradient-to-bl
gradient-to-l
gradient-to-tl
CSS
Customizing
windi.config.js
export default {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': 'url(\'/img/hero-pattern.svg\')',
'footer-texture': 'url(\'/img/footer-texture.png\')',
}),
},
},
}
Gradient From
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Gradient Via
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS
Gradient To
transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
gray-500/50
red-500/50
yellow-500/50
blue-500/50
green-500/50
CSS