Skip to content

CSS · backgrounds

Gradient generator

Linear for hero bands, radial for faux-spotlight cards, conic when you want that pie-chart energy without actually shipping a chart library. Two stops keeps the UI fast — enough for 80% of marketing sections; add extra stops in your stylesheet when you need a sunset, not a button.

135°

CSS


          

        

      

      

        

          

            
Why this gradient tool exists

            

              Hero backgrounds and button skins rarely need a full vector stack. This page optimizes the common case:
              two stops, one CSS line, instant preview — so you can paste into a prototype and iterate angle
              until banding stops on a cheap display.
            

            
How to use it

            
    
              
  1. Choose linear, radial, or conic — most marketing heroes stay linear; radial suits spotlight cards.
    2. 
              
  2. Pick two endpoint colors; drag angle until the transition feels even on your monitor.
    3. 
              
  3. Copy the generated background line into your stylesheet or design handoff doc.
    4. 
              
  4. Run text samples through the contrast checker if body copy sits on top of the gradient.
    5. 
            

            

              
Reach for a vector tool when…

              

                You need mesh gradients, more than two stops, or export to SVG for illustration. This UI stays intentionally small.
              

            

            
Where gradients go wrong

            
    
              
  • Overly saturated endpoints — browsers clip differently; tame chroma if banding shows up next to UI chrome.
    • 
              
  • Radial circles that do not match card border-radius — tweak size keywords or switch to linear for predictable edges.
    • 
              
  • Conic rainbows on buttons — fun in Dribbble, exhausting in enterprise SaaS.
    • 
            

          

          
        

        

          
Related tools

          
Solid colors, contrast, and named scales next to gradients.

          

            
              
              
                Color picker
                Dial stop colors with linked formats before you paste CSS.
              
            
            
              
              
                Contrast checker
                Check headline and body text on top of your new gradient.
              
            
            
              
              
                Tailwind palette
                Borrow neutrals that sit cleanly under colorful backgrounds.
              
            
          

        

      

      

        
FAQ

        

          How do I reduce banding on low-end displays?
          

            Shorten the distance the gradient travels, nudge angle a few degrees, or move one stop slightly toward mid-gray.
            Sometimes the fix is a shorter hero section, not more color stops.
          

        

        

          Can I add more than two stops?
          

            Not in this UI — we optimized for the common “brand A to brand B” case. Duplicate the generated CSS and add
            stops manually, or jump to a vector tool for complex meshes.
          

        

        

          Does conic respect dark mode?
          

            The preview sits on whatever page background your theme uses. Toggle the site theme and re-check perceived
            brightness — conic angles do not change, but surrounding chrome does.
          

        

        

          Linear angle feels backwards — why?
          

            CSS angles run with 0deg pointing “up” then clockwise in the default coordinate space for linear gradients.
            If it feels wrong, rotate 180deg mentally or flip color stops.
          

        

        

          Can I use this in email HTML?
          

            Many clients strip or downsample gradients. Test in real inboxes; have a flat fallback color behind the gradient
            declaration.