Tailwind CSS Gradient Presets
Beautiful gradient presets for Tailwind CSS. Copy-paste gradient classes for backgrounds, text, and borders. From subtle to vibrant color combinations.
Sunset Gradient
Warm, vibrant gradient inspired by sunset colors. Perfect for hero sections and attention-grabbing headers.
Ocean Gradient
Cool, professional gradient with ocean vibes. Ideal for tech products and corporate sites.
Aurora Gradient
Magical gradient inspired by northern lights. Perfect for creative and gaming sites.
Forest Gradient
Fresh, nature-inspired gradient. Great for eco-friendly and organic brands.
Rainbow Gradient
Full rainbow spectrum gradient. Colorful and inclusive.
Peacock Gradient
Vibrant multi-color gradient like peacock feathers. Eye-catching and memorable.
Sky Gradient
Clean sky blue gradient. Professional and trustworthy.
Midnight Gradient
Deep, elegant gradient for dark mode. Ideal for premium dark interfaces.
Sunrise Gradient
Warm sunrise gradient from bottom to top. Uplifting and energetic.
Cyberpunk Gradient
Futuristic cyberpunk gradient. Edgy and electric.
Fire Gradient
Energetic gradient with fiery colors. Perfect for sale banners and urgency CTAs.
Royal Gradient
Royal purple gradient for premium designs. Luxurious and sophisticated.
Berry Gradient
Rich berry-inspired gradient. Bold and sophisticated.
Gold Gradient
Rich gold gradient for premium elements. Luxurious and prestigious.
Synthwave Gradient
80s synthwave sunset gradient. Retro-futuristic vibes.
Galaxy Gradient
Cosmic galaxy gradient. Infinite and inspiring.
Candy Gradient
Playful, sweet gradient with pink tones. Great for fun and feminine designs.
Neon Gradient
Vibrant neon-style gradient. Perfect for cyberpunk and retro themes.
Tropical Gradient
Vibrant tropical paradise gradient. Exotic and refreshing.
Summer Gradient
Hot summer vibes gradient. Energetic and fun.
Nebula Gradient
Colorful nebula gradient. Cosmic and vibrant.
Citrus Gradient
Fresh citrus-inspired gradient. Great for food and beverage brands.
Vaporwave Gradient
Retro vaporwave aesthetic gradient. Nostalgic and dreamy.
Beach Gradient
Sky meets sand beach gradient. Relaxing and serene.
Night Sky Gradient
Deep night sky gradient. Mysterious and contemplative.
Lavender Gradient
Soft lavender gradient for calming designs. Perfect for wellness and spa brands.
Silver Gradient
Sleek silver gradient. Modern and sophisticated.
Ruby Gradient
Rich ruby gradient. Passionate and valuable.
Cotton Candy Gradient
Soft pastel cotton candy gradient. Sweet and dreamy.
Autumn Gradient
Warm autumn leaves gradient. Cozy and nostalgic.
Earth Gradient
Earth from space gradient. Natural and global.
Dusk Gradient
Beautiful dusk sky gradient. Romantic and reflective.
Steel Gradient
Subtle metallic gradient for professional designs. Great for tech and industrial sites.
Coral Gradient
Warm coral gradient. Inviting and friendly.
Sapphire Gradient
Deep sapphire gradient. Royal and valuable.
Bubblegum Gradient
Fun bubblegum pink gradient. Playful and youthful.
Desert Gradient
Hot desert sunset gradient. Warm and adventurous.
Spring Gradient
Fresh spring bloom gradient. Renewal and growth.
Dawn Gradient
Early dawn sky gradient. Hopeful and peaceful.
Mint Gradient
Soft mint green gradient. Fresh and clean.
Emerald Shine Gradient
Shimmering emerald gradient. Precious and elegant.
Amethyst Gradient
Mystical amethyst gradient. Spiritual and calming.
Ice Cream Gradient
Delicious neapolitan ice cream gradient. Creamy and indulgent.
Winter Gradient
Soft winter snow gradient. Clean and refreshing.
Slate Gradient
Dark slate gradient for dark mode UIs. Elegant and minimal.
Topaz Gradient
Warm topaz gradient. Sunny and optimistic.
Bronze Gradient
Warm bronze gradient. Earthy and traditional.
Copper Gradient
Warm copper metallic gradient. Industrial and crafted.
Frequently Asked Questions
How do I create a gradient in Tailwind CSS?
Use the bg-gradient-to-{direction} class followed by from-{color}, via-{color} (optional), and to-{color} classes. For example: bg-gradient-to-r from-blue-500 to-purple-500.
Can I create text gradients in Tailwind?
Yes! Use bg-gradient-to-r with your color stops, then add bg-clip-text and text-transparent classes to apply the gradient to text.