Free CSS Gradient Generator

What is a CSS gradient?

A CSS gradient creates a smooth, progressive transition between two or more colors — without a single image file. The browser renders gradients natively using the linear-gradient() and radial-gradient() functions, making them resolution-independent, infinitely scalable, and zero-byte on the network.

Linear gradients flow in a direction you control (an angle in degrees or a keyword like to right). Radial gradients radiate outward from a central point in a circular or elliptical shape. Both support multiple color stops, so you can blend as many colors as you need in a single declaration.

/* Linear — 135° diagonal orange to teal */
background: linear-gradient(135deg, #FF8731 0%, #186B76 100%);

/* Radial — circle from center */
background: radial-gradient(circle, #FF8731 0%, #186B76 100%);

How to use this gradient generator

1. 1

   Choose a gradient type

   Select "Linear" for directional color flows (left-to-right, diagonal, etc.) or "Radial" for circular gradients that radiate from the center.

2. 2

   Set the angle

   Use the angle slider to rotate a linear gradient from 0° to 360°. The live preview updates instantly as you drag.

3. 3

   Add and tweak color stops

   Each row has a color picker and a position slider. Click "+ Add Stop" for more colors. Remove any stop with the × button.

4. 4

   Copy the CSS

   Hit "Copy CSS" to grab the ready-to-use CSS declaration and paste it straight into your stylesheet.

Frequently asked questions