Tailwind CSS Gradient Generator

Gradient Type
Direction
Color Stops
    Color Interpolation
    Quick Presets 
    
                
            
    
        
    

    
    


    





    
    
    How to Use the Tailwind CSS Gradient Generator
    
    
    This tool generates ready-to-use Tailwind CSS v4 gradient classes with a live visual editor. Make your choices in the left panel and the preview updates immediately. When you are satisfied, copy the generated code and paste it into your project.
    

    
    Step-by-step guide
    
    
      
        
    1. Choose a gradient type. Select Linear, Radial, or Conic using the tabs at the top of the controls panel.
      2. 
        
    2. Set the direction or position. For linear gradients, click one of the eight compass-direction buttons or choose Angle to enter an exact degree value. For radial gradients, drag the horizontal and vertical sliders to move the gradient's centre point. For conic gradients, set the start angle.
      3. 
        
    3. Adjust color stops. Each row in the Color Stops section represents one gradient stop. Use the color swatch or hex input to change the color, and the slider to move its position (0–100%). Add extra stops with the + Add Color Stop button, or remove them with the × button.
      4. 
        
    4. Pick an interpolation mode. Tailwind v4 lets you control the color space used for gradient blending. oklab (the default) tends to produce the most perceptually uniform transitions. Try oklch for vivid mid-point hues.
      5. 
        
    5. Choose an output format. Switch between Tailwind Classes, CSS, and HTML Snippet using the tabs above the code output box.
      6. 
        
    6. Copy the code. Click the Copy button to send the generated code to your clipboard.
      7. 
    
    

    
    Understanding Tailwind CSS v4 Gradients
    
    
    Tailwind CSS v4 introduces dedicated utility classes for all three CSS gradient types. The v4 syntax differs meaningfully from v3, so if you are migrating an existing project, pay attention to the class names.
    

    
    Linear Gradients
    
    
    In Tailwind v4, linear gradients use bg-linear-* utilities. You can specify a direction using compass keywords or an exact degree angle:
    
    
    <!-- Direction keywords -->
<div class="bg-linear-to-r from-indigo-500 to-purple-500"></div>
<div class="bg-linear-to-br from-cyan-400 to-blue-600"></div>

<!-- Exact angle (v4 only) -->
<div class="bg-linear-45 from-orange-400 to-rose-600"></div>
    

    
    The available direction keywords are:
    
    
      
        
    • bg-linear-to-t — to top
      • 
        
    • bg-linear-to-tr — to top-right
      • 
        
    • bg-linear-to-r — to right
      • 
        
    • bg-linear-to-br — to bottom-right
      • 
        
    • bg-linear-to-b — to bottom
      • 
        
    • bg-linear-to-bl — to bottom-left
      • 
        
    • bg-linear-to-l — to left
      • 
        
    • bg-linear-to-tl — to top-left
      • 
    
    

    
    Radial Gradients
    
    
    Radial gradients use the bg-radial utility. By default the gradient originates from the center, but you can shift the focal point using an arbitrary value:
    
    
    <!-- Default: centered -->
<div class="bg-radial from-pink-400 to-fuchsia-700"></div>

<!-- Custom position (arbitrary value) -->
<div class="bg-radial-[at_25%_75%] from-sky-200 to-indigo-900"></div>
    

    
    Conic Gradients
    
    
    Conic gradients rotate colors around a center point. Use bg-conic or bg-conic-<angle> to set the start angle:
    
    
    <!-- Default: starts at 0deg -->
<div class="bg-conic from-blue-600 to-sky-400 to-50%"></div>

<!-- Custom start angle -->
<div class="bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
    

    
    Color Stops: from-*, via-*, and to-*
    
    
    Color stops work the same way across all three gradient types. You can use named palette colors or arbitrary hex/RGB values:
    
    
    <!-- Named colors -->
<div class="bg-linear-to-r from-emerald-400 via-teal-500 to-cyan-600"></div>

<!-- Arbitrary hex values -->
<div class="bg-linear-to-r from-[#ff6b6b] to-[#4ecdc4]"></div>

<!-- With explicit stop positions -->
<div class="bg-linear-to-r from-sky-500 from-10% via-indigo-500 via-40% to-purple-700 to-90%"></div>
    

    
    Color Interpolation (v4 feature)
    
    
    Tailwind v4 lets you control the color space in which the gradient transition is calculated. This is applied with a modifier on the gradient class:
    
    
    <div class="bg-linear-to-r/oklab  from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch  from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/srgb   from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/hsl    from-indigo-500 to-teal-400"></div>
    
    
    The default interpolation mode in Tailwind v4 is oklab, which produces smooth, perceptually uniform gradients. Using oklch often produces more vibrant mid-tones because it interpolates through the hue naturally, avoiding the grey "muddy zone" common with sRGB interpolation.
    

    
    Migration from Tailwind v3
    
    
    If you are upgrading from Tailwind CSS v3, the following class name changes apply to gradients:
    
    
      
        
    • Linear gradients: bg-gradient-to-r → bg-linear-to-r (and similarly for all directions)
      • 
        
    • Radial gradients: Previously required the bg-gradient-* approach with custom CSS; now use bg-radial natively.
      • 
        
    • Conic gradients: Similarly, now use bg-conic natively without custom CSS.
      • 
        
    • Interpolation: The /oklab, /oklch etc. modifiers are new in v4 and have no v3 equivalent.
      •