# Gradient Utilities Reference Guide Complete reference for all gradient utility classes in your Tailwind CSS v4 setup. --- ## 📝 Text Gradient Utilities ### `text-gradient` or `text-gradient-primary` **Where to apply:** Headings, titles, labels, text elements, button text **Examples:** ```tsx

Main Heading

Gradient text

Label ``` ### `text-gradient-accent` **Where to apply:** Secondary headings, accent text **Examples:** ```tsx

Subheading

Accent text

``` --- ## 🎨 Background Gradient Utilities ### `bg-primary-gradient` **Where to apply:** Buttons, cards, sections, hero banners, sidebars, containers **Examples:** ```tsx
Card
Hero section
Header
``` ### `bg-accent-gradient` **Where to apply:** Secondary buttons, alternate sections, decorative elements **Examples:** ```tsx
Feature card
Banner
``` ### `bg-light-blue` **Where to apply:** Subtle backgrounds, hover states, light sections **Examples:** ```tsx
Light section
Hover card
``` --- ## 🎯 Solid Color Utilities (From Gradient Palette) ### `text-gradient-start` **Color:** `#1A315F` **Where to apply:** Icons, text, borders **Examples:** ```tsx

Title

Text

Bordered div
``` ### `text-gradient-end` **Color:** `#25518C` **Where to apply:** Icons, text, borders **Examples:** ```tsx Label
Bordered div
``` ### `bg-gradient-start` **Color:** `#1A315F` **Where to apply:** Solid backgrounds, badges, pills **Examples:** ```tsx
Solid background
Badge ``` ### `bg-gradient-end` **Color:** `#25518C` **Where to apply:** Solid backgrounds, badges, pills **Examples:** ```tsx
Solid background
Badge ``` --- ## 🖱️ Hover State Utilities ### `hover-text-gradient` **Where to apply:** Links, buttons, text that should show gradient on hover **Examples:** ```tsx Link
Interactive text
``` ### `hover-bg-gradient` **Where to apply:** Cards, buttons, containers that need gradient background on hover **Examples:** ```tsx
Card
Link card ``` --- ## 🔲 Border Gradient Utilities ### `border-gradient` **Where to apply:** Cards, containers, dividers (requires border to be set first) **Examples:** ```tsx
Card
Container
``` ### `border-gradient-primary` **Where to apply:** Cards, inputs, containers (includes border styling) **Examples:** ```tsx
Card with gradient border
``` --- ## 📱 Common Use Cases by Component Type ### Buttons ```tsx // Primary gradient button // Outline button with gradient text // Hover gradient button // Solid color button // Gradient text button ``` ### Cards ```tsx // Gradient background card

Card Title

Card content

// Gradient border card

Card Title

Card content

// Hover gradient card

Hover Card

Hover to see effect

// Card with gradient heading

Title

Content here

``` ### Icons (Lucide React) ```tsx // Solid gradient color (recommended) // Icon on gradient background
// Icon with solid gradient background
// SVG gradient (define gradient once in layout) ``` ### Headers & Titles ```tsx // Main heading with gradient

Main Title

// Subheading with accent gradient

Subtitle

// Solid color heading

Section Title

// Gradient text with icon

Featured

``` ### Navigation/Sidebar ```tsx // Sidebar container with gradient background // Active menu item // Inactive menu item // Nav link with gradient on hover Features ``` ### Badges & Pills ```tsx // Gradient background badge New // Solid color badge Badge // Gradient text badge with border Tag // Light background badge Label ``` ### Forms ```tsx // Submit button with gradient // Input with light background // Label with gradient color // Input with gradient border // Checkbox with gradient text ``` ### Sections/Containers ```tsx // Hero section with gradient background

Welcome

Subtitle here

// Feature section with light background

Features

{/* Content */}
// Section with gradient heading

Our Services

{/* Content */}
// Container with gradient border

Premium Content

{/* Content */}
``` ### Lists & Menu Items ```tsx // Active list item with gradient
  • Active Item
    • // Hover effect list item
  • Hover Item
    • // Icon list item with gradient icon
  • Completed Task
    • // Numbered list with gradient numbers
  • 01

    Step One

    Description here

    • ``` ### Tables ```tsx // Table header with gradient background Name Status // Table header with gradient text Name Status // Status badge in table Active ``` ### Modals/Dialogs ```tsx // Modal header with gradient

    Modal Title

    // Modal with gradient border

    Dialog

    {/* Content */}
    // Modal close button ``` ### Alerts/Notifications ```tsx // Success alert with gradient

    Success message

    // Alert with gradient border

    Information message

    // Alert with gradient icon

    Warning message

    ``` --- ## 💡 Best Practices ### ✅ DO - **Use `text-gradient` for main headings and important text** - Creates visual hierarchy - **Use `text-gradient-start` for icons** - Most common and looks professional - **Use `bg-primary-gradient` for primary actions** - Buttons, CTAs, hero sections - **Use `bg-light-blue` for subtle backgrounds** - Forms, sections, hover states - **Combine utilities for better effects** - `bg-primary-gradient text-white rounded-lg p-4 shadow-lg` - **Use solid colors for better performance** - `text-gradient-start` instead of full gradients on small elements - **Maintain consistency** - Use same gradient direction throughout your app ### ❌ DON'T - **Don't use text gradients on small text (< 14px)** - Hard to read, poor accessibility - **Don't overuse gradients** - Use strategically for emphasis, not everywhere - **Don't combine `text-gradient` with `bg-primary-gradient`** - Poor contrast and readability - **Don't use gradient backgrounds on form inputs** - Use `bg-light-blue` for better UX - **Don't use gradients on body text** - Reserve for headings and important elements - **Don't mix too many gradient directions** - Stick to your primary (vertical) and accent (horizontal) - **Don't forget hover states** - Gradients should respond to user interaction --- ## 🎨 Quick Combination Patterns ### Premium Feature Card ```tsx

    Premium Feature

    Description text goes here

    ``` ### Call-to-Action Button ```tsx ``` ### Stat Card ```tsx

    Total Appointments

    127

    +12% from last month

    ``` ### Feature List Item ```tsx

    Feature Title

    Feature description explaining the benefit to users

    ``` ### Profile Card ```tsx
    {/* Avatar */}

    John Doe

    Product Designer

    ``` ### Hero Section ```tsx

    Welcome to AIVLY

    Transform your business with AI-powered solutions

    ``` ### Dashboard Widget ```tsx

    Revenue

    $45,230

    +8% from last month

    ``` ### Pricing Card ```tsx

    Pro Plan

    $49 /month
    • Unlimited projects
    • Priority support
    ``` --- ## 📊 Color Reference | Utility | Color Value | Usage | | --------------------- | --------------------------------------------------- | ------------------- | | `text-gradient-start` | `#1A315F` | Primary dark blue | | `text-gradient-end` | `#25518C` | Primary light blue | | `bg-primary-gradient` | `linear-gradient(180deg, #1A315F 0%, #25518C 100%)` | Vertical gradient | | `bg-accent-gradient` | `linear-gradient(90deg, #25518C 0%, #1A315F 100%)` | Horizontal gradient | | `bg-light-blue` | `rgba(38, 84, 145, 0.15)` | Light background | --- ## 🔍 Accessibility Notes - ⚠️ Ensure sufficient contrast when using gradients with text - ⚠️ Avoid gradient text smaller than 16px for readability - ⚠️ Always test gradient combinations for color-blind users - ⚠️ Use solid colors (`text-gradient-start`) for critical UI elements - ✅ Gradient backgrounds work well with white text - ✅ Test hover states for clear visual feedback --- **Last Updated:** November 2024 **Tailwind CSS Version:** v4.x