CSS Gradient Generator

It is a generator for applying a gradation to the background.
It supports linear-gradient, radial-gradient (circular), conic-gradient (fan shape), etc. of basic (linear) gradation, and can generate gradation intuitively.
Since it also supports the specification of multiple gradations, it is also possible to generate a color that mixes multiple gradations by making the specified color of the above gradation transparent.
In the circular / fan-shaped gradation, in addition to preparing a tool for intuitively operating the center position, it is also equipped with a function that can intuitively operate the angle (deg) of the linear / fan-shaped gradation. I am.
It also supports repeated gradations.
You can also select and customize from over 70 types of samples!

Gradation Sample List. You can select and edit the base

Please note that when you select the example in the sample list, any data being edited will be overwritten.

Two-color gradation

Gradation of 3 or more colors


.original-gradient {
  height: 200px;
  width: 90%;

Style editor

  • You can add color waypoints by clicking on the gradation area.
  • You can change the position to the left or right by dragging and dropping the color waypoints.
Specify color transmittance at once
  1. rgba(247, 166, 12, 1)
  2. rgba(255, 34, 87, 1)
  3. rgba(154, 39, 238, 1)
  4. rgba(35, 102, 247, 1)
  • 0 / 360°
  • 90°
  • 180°
  • 270°

Other specifications

How to use the tool

・I don't know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.

Please take advantage of it.

List of generators

List of other Tools