Logo Windi CSS

Gradients

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