Scanner Tools

CSS Gradient Generator

Build a CSS gradient visually — pick the type, add color stops, drag the angle, and copy the snippet when it looks right.

Preview

Type

Color stops

Presets

Generated CSS 


      

      
      

        

          
            Frequently asked questions
          
          

            

              

                What gradient types are supported?
              

              

                Linear, radial, and conic. The angle slider applies to linear
                and conic gradients, while radial gradients let you choose a
                shape (circle or ellipse) and a center position.
              

            

            

              

                Can I add more than two colors?
              

              

                Yes. Use "+ Add stop" to add as many color stops as you like,
                each with its own color and position. "Surprise me" generates a
                random combination, and the presets give you a quick starting
                point.
              

            

            

              

                How do I use the generated CSS?
              

              

                Copy the snippet — for example <code>background:
                linear-gradient(135deg, #FBBF24 0%, #7C3AED 100%)</code> —
                and paste it onto any element's
                <code>background</code> property in your stylesheet.
              

            

            

              
Is anything uploaded?

              

                No. The gradient is rendered and the CSS generated entirely in
                your browser; nothing leaves your device.
              

            

          

        

      

      
      

        

          Related tools