Background Gradient

// Basic gradient from cyan to blue
WDiv(className: 'bg-gradient-to-r from-cyan-500 to-blue-500')

// Three-color gradient
WDiv(className: 'bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500')

Basic Usage#

To create a gradient, you need to specify a direction (e.g., bg-gradient-to-r) and at least a starting color (from-*). Wind will create a linear gradient based on these parameters.

WDiv(
  className: 'h-24 bg-gradient-to-r from-cyan-500 to-blue-500',
  child: WText('Gradient Background'),
)

If you only provide a from color, the gradient will fade to transparent by default. If you provide to but no from, it will also handle it gracefully, but standard usage typically defines both or relies on the fade-to-transparent behavior.

Quick Reference#

Variants#

Gradient Stops#

Use from-*, via-*, and to-* utilities to define the color stops of your gradient.

// Start color only (fades to transparent)
WDiv(className: 'bg-gradient-to-r from-green-400')

// Start and end colors
WDiv(className: 'bg-gradient-to-r from-green-400 to-blue-500')

// Start, middle, and end colors
WDiv(className: 'bg-gradient-to-r from-green-400 via-blue-500 to-purple-600')

Color Opacity#

You can control the opacity of gradient colors using the /opacity modifier.

WDiv(className: 'bg-gradient-to-r from-red-500/50 to-red-500/0')

Responsive Design#

Apply different gradient directions or colors at different breakpoints using standard responsive prefixes.

WDiv(className: 'bg-gradient-to-r md:bg-gradient-to-b from-blue-500 to-green-500')

Dark Mode#

Use dark: to specify different gradient colors for dark mode.

WDiv(className: 'bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-900')

Arbitrary Values#

If you need specific hex colors that aren't in your theme, use square bracket notation.

WDiv(className: 'bg-gradient-to-r from-[#1da1f2] to-[#1a91da]')

Three, four, six and eight hex digits are accepted, matching hexToColor. The four- and eight-digit forms carry alpha and it leads, because Flutter packs AARRGGBB where CSS writes RRGGBBAA. A scrim fading out is the usual reason to reach for one:

WDiv(className: 'bg-gradient-to-t from-[#cc000000] to-transparent')

Customizing Theme#

Gradient colors use your theme's color palette. To add new colors, update the colors key in WindThemeData.

WindThemeData(
  colors: {
    'brand': {
      '500': Color(0xFF1DA1F2),
      '600': Color(0xFF1A91DA),
    },
  },
)

Then use them in your gradients:

WDiv(className: 'bg-gradient-to-r from-brand-500 to-brand-600')

Related Documentation#

• Background Color
• Background Image