Tailwind Gradient Builder

Create stunning modern gradients with Tailwind CSS for backgrounds, text, borders, and animations.

Core Workflow Choose gradient type: Linear, radial, conic, or mesh Select color palette: Define color stops and positions Add direction/angle: Configure gradient orientation Apply effects: Blur, animation, glassmorphism Optimize: Ensure performance and accessibility Basic Linear Gradients Simple Two-Color Gradient

Direction Classes Class Direction bg-gradient-to-t Bottom to Top bg-gradient-to-tr Bottom-left to Top-right bg-gradient-to-r Left to Right bg-gradient-to-br Top-left to Bottom-right bg-gradient-to-b Top to Bottom bg-gradient-to-bl Top-right to Bottom-left bg-gradient-to-l Right to Left bg-gradient-to-tl Bottom-right to Top-left Three-Color Gradients

Modern Gradient Presets Aurora Borealis

Sunset Vibes

Neon Glow

Forest Mist

Midnight City

Peach Sunset

Gradient Text

Animated Gradient

Tailwind Config for Animated Gradient Text // tailwind.config.js module.exports = { theme: { extend: { animation: { gradient: 'gradient 3s ease infinite', }, keyframes: { gradient: { '0%, 100%': { backgroundPosition: '0% 50%' }, '50%': { backgroundPosition: '100% 50%' }, }, }, }, }, };

Radial Gradients

Radial Position Variants

Conic Gradients

Mesh Gradients CSS Mesh Gradient (Multiple Radials)

Reusable Mesh Component // MeshGradient.tsx interface MeshGradientProps { colors?: string[]; className?: string; }

export function MeshGradient({ colors = [ 'hsla(240,100%,70%,0.3)', 'hsla(189,100%,56%,0.3)', 'hsla(355,100%,66%,0.3)', 'hsla(340,100%,70%,0.3)', ], className = '' }: MeshGradientProps) { const positions = ['40%_20%', '80%_0%', '0%_50%', '80%_50%'];

return (

relative ${className}}>

{colors.map((color, i) => (

radial-gradient(at ${positions[i]}, ${color} 0px, transparent 50%) }} /> ))}

); }

Animated Gradients Flowing Gradient Animation

// tailwind.config.js module.exports = { theme: { extend: { animation: { 'gradient-x': 'gradient-x 3s ease infinite', 'gradient-y': 'gradient-y 3s ease infinite', 'gradient-xy': 'gradient-xy 3s ease infinite', }, keyframes: { 'gradient-x': { '0%, 100%': { 'background-size': '200% 200%', 'background-position': 'left center', }, '50%': { 'background-size': '200% 200%', 'background-position': 'right center', }, }, 'gradient-y': { '0%, 100%': { 'background-size': '200% 200%', 'background-position': 'center top', }, '50%': { 'background-size': '200% 200%', 'background-position': 'center bottom', }, }, 'gradient-xy': { '0%, 100%': { 'background-size': '400% 400%', 'background-position': 'left top', }, '50%': { 'background-size': '400% 400%', 'background-position': 'right bottom', }, }, }, }, }, };

Breathing/Pulsing Gradient

// Add to tailwind.config.js { animation: { 'pulse-gradient': 'pulse-gradient 4s ease-in-out infinite', }, keyframes: { 'pulse-gradient': { '0%, 100%': { opacity: '1' }, '50%': { opacity: '0.7' }, }, }, }

Glassmorphism Basic Glass Effect

Glass Card Component // GlassCard.tsx interface GlassCardProps { children: React.ReactNode; blur?: 'sm' | 'md' | 'lg' | 'xl'; className?: string; }

export function GlassCard({ children, blur = 'md', className = '' }: GlassCardProps) { const blurClasses = { sm: 'backdrop-blur-sm', md: 'backdrop-blur-md', lg: 'backdrop-blur-lg', xl: 'backdrop-blur-xl', };

return (

${blurClasses[blur]} bg-white/10 dark:bg-gray-900/20 border border-white/20 dark:border-gray-700/30 rounded-2xl shadow-xl ${className}} > {children}

); }

Glass with Gradient Border

Gradient Borders Gradient Border with Pseudo-element

Content with gradient border

Animated Gradient Border

Animated border content

// tailwind.config.js { animation: { 'spin-slow': 'spin 3s linear infinite', }, }

Gradient Overlays Image Overlay

Title

Fade Edge Effect

Dark Mode Gradients

Performance Tips Limit animation complexity: Use will-change sparingly Prefer CSS over JS: CSS gradients are GPU-accelerated Reduce gradient stops: Fewer colors = better performance Use opacity over complex gradients: Simpler blends render faster Test on mobile: Mesh gradients can be heavy on mobile devices

Best Practices Maintain contrast: Ensure text is readable over gradients Consistent palette: Use colors from your design system Subtle animations: Avoid distracting motion Fallback colors: Provide solid color fallback Test in dark mode: Gradients should work in both themes Accessibility: Check contrast ratios for overlaid text Output Checklist

Every gradient implementation should include:

Appropriate gradient type for use case Colors from design system palette Dark mode variant if applicable Animation config added to tailwind.config.js Performance optimization for animated gradients Fallback for older browsers Text contrast verification Mobile device testing

tailwind-gradient-builder

安装

Gradient Text

Animated Gradient

Title