CSS Gradient Generator

Design beautiful linear gradients visually and grab the CSS code instantly.

What is a CSS Linear Gradient?

A CSS linear gradient allows you to display a smooth transition between two or more specified colors along a straight line. Instead of using an image file (like a JPG or PNG) for a background gradient, you can use pure CSS.

Using CSS gradients is better for performance because the browser generates the graphic dynamically, saving bandwidth and HTTP requests. Additionally, CSS gradients look perfectly crisp on high-resolution Retina displays.

CSS Syntax Explained

The syntax for a basic linear gradient is straightforward:

background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction: Defines the starting point and direction of the gradient. It can be written as an angle (e.g., 45deg) or using keywords like to right, to bottom right. If omitted, the default is to bottom.
  • color-stop: The colors you want to transition between. You must specify at least two colors. You can also specify an optional percentage or length to declare exactly where the color should sit on the gradient line.