Background Gradient

Utilities for creating linear gradients with customizable directions and color stops.

• Basic Usage
• Quick Reference
• Variants
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

// 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]')

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