Gradients & Backgrounds

Twigwind provides powerful utilities for creating linear gradients and managing background properties.

Linear Gradients

Create beautiful linear gradients using the gradient- utility with direction and color combinations.

Basic Syntax

gradient-{direction}-{color1}-{color2}-{color3}...

Directional Gradients

<div class="gradient-to-r-red-blue">Left to right</div>
<div class="gradient-to-l-green-yellow">Right to left</div>
<div class="gradient-to-t-purple-pink">Bottom to top</div>
<div class="gradient-to-b-blue-cyan">Top to bottom</div>

Diagonal Gradients

<div class="gradient-to-tr-red-blue">Top-left to bottom-right</div>
<div class="gradient-to-tl-green-yellow">Top-right to bottom-left</div>
<div class="gradient-to-br-purple-pink">Top-left to bottom-right</div>
<div class="gradient-to-bl-blue-cyan">Top-right to bottom-left</div>

Angle Gradients

<div class="gradient-45deg-red-blue">45 degree angle</div>
<div class="gradient-90deg-green-yellow">90 degree angle</div>
<div class="gradient-135deg-purple-pink">135 degree angle</div>
<div class="gradient-180deg-blue-cyan">180 degree angle</div>

Multi-Color Gradients

<div class="gradient-to-r-red-yellow-green">Three colors</div>
<div class="gradient-to-b-blue-purple-pink">Three colors vertical</div>
<div class="gradient-45deg-red-orange-yellow-green">Four colors at angle</div>

Background Utilities

Control background behavior with clip utilities and dynamic image backgrounds.

Background Clip

Control how background extends within an element's box model.

<div class="gradient-to-r-red-blue clip-border">Border box</div>
<div class="gradient-to-r-green-yellow clip-padding">Padding box</div>
<div class="gradient-to-r-purple-pink clip-content">Content box</div>

Background Images

Set background images dynamically using the image-url- utility.

<div class="image-url-https://images.unsplash.com/photo-1506905925346-21bda4d32df4">
  Content with background image
</div>

Interactive States

Combine gradients with hover states for dynamic effects.

<div class="bg-blue hover:gradient-to-r-purple-pink">
  Hover for gradient
</div>
<div class="gradient-to-r-red-blue hover:gradient-to-l-blue-red">
  Hover to reverse gradient
</div>

Responsive Gradients

Use responsive prefixes to create different gradients at different screen sizes.

<div class="gradient-to-r-red-blue md:gradient-to-b-green-yellow lg:gradient-45deg-purple-pink">
  Responsive gradient
</div>

Available Directions