CSS Gradient Generator

What is a CSS Gradient?

A CSS gradient allows you to display a smooth transition between two or more specified colors. Gradients are defined by the CSS3 module and are highly supported across all modern web browsers. Because they are generated by the browser, gradients look crisp and scale perfectly regardless of the screen resolution or zoom level.

Benefits of Using CSS Gradients Over Images

• Performance: Images require an HTTP request to the server, which can slow down page loading times. A CSS gradient is just a line of code, rendering almost instantly.
• Scalability: Raster images pixelate when stretched over a large background. CSS gradients mathematically scale to fit any container size perfectly.
• Flexibility: Changing a color on an image requires opening design software like Photoshop. With CSS, you simply alter the hex code value directly in your stylesheet.

Linear vs. Radial Gradients

Linear Gradients go in a straight line. You can control the direction using angles (e.g., 90deg goes from left to right, 180deg goes from top to bottom).

Radial Gradients emanate from a central point outward in a circular or elliptical pattern. They are great for creating glowing effects, buttons, or focusing attention on the center of a page.

How to use this generator?

Select whether you want a Linear or Radial effect. If using Linear, drag the slider to adjust the angle of the transition. Click on the color swatches to pick your two blend colors. Once you love the result in the preview box above, simply click "Copy CSS" and paste it into your stylesheet!