Gradient Background CSS Generator

Generates CSS code to create a gradient color background.
Intuitive operation allows customization while viewing previews that are reflected in real time.
It can be created by selecting from three types: linear-gradient, radial-gradient, and conic-gradient.
The output CSS code can be easily used by copy and paste.

Customization

Reset

・Type

Linear Radial Conic

・Direction

deg

・Shape

Ellipse (default)Circle

・Size

closest-sideclosest-cornerfarthest-sidefarthest-corner (default)

・Start Angle

deg

・Center Position

X：%

Y：%

・Repeat

Repeats when the first stop to the last stop is less than 100%.

Color Setting

• Add a new color stop at the clicked position
• Drag and drop handle left and right to adjust position

▼

▼

Unit：%

Reverse

▼ Edit selected color

・List View

• %

  #22d3ee

• %

  #8b5cf6

・CSS Color Format

HEXRGBAHSLOKLCH

※

OKLCH can render gradients (especially between opposite colors) vividly, but older browsers do not support them.

Additional Setting

Preview

CSS Code

Copy Code

.gradation {
  background-image: linear-gradient(90deg, #22d3ee, #8b5cf6);
}

Notes

• The reset CSS of this site is based on “modern-normalize.css”. Depending on the reset CSS and other stylesheets loaded in your project, there may be differences from the preview appearance.