CSS Gradient Generator

How to use the CSS gradient generator

1. 1

   Choose the gradient type

   Linear for straight-line transitions, Radial to radiate from the center, Conic to rotate around a point like a pie chart.

2. 2

   Configure the angle

   For linear gradients, drag the slider or use the quick angle shortcuts. The gradient updates instantly in the preview.

3. 3

   Customize colors

   Click each color stop to change the hue. Adjust the position (%) of each stop with the slider. Add new stops or remove existing ones.

4. 4

   Copy the CSS

   The code is generated automatically below the preview. You can copy the background value or the background-image value depending on what you need.

CSS gradient types

CSS offers three native functions for creating gradients. The linear-gradient() function creates a smooth transition between colors along a line at the angle you specify (0° is bottom to top, 90° left to right, 135° diagonal). The radial-gradient() function starts from a central point and distributes colors outward in a circle or ellipse, ideal for light and glow effects. The conic-gradient() function is the most modern: it rotates colors around a point like clock hands, perfect for pie charts, progress indicators and color wheels.

Color stops are the key points that define which colors appear and where. You can have from 2 to 6 stops in this generator. The position of each stop (in percentage) controls where the transition from that color begins. If two consecutive stops have the same position, an abrupt change is created instead of a smooth transition.

Frequently asked questions