devhexlab

Gradient Generator

Create CSS gradients with a visual builder

gradientcsscolorgenerate

Gradient Generator

#6366f1

Preview

#d0d1fb
#7e80f4
#2c2fed
#0f12b0
#080a5e

CSS Output

/* Gradient */
.element {
  background: linear-gradient(to right, #d0d1fb, #7e80f4, #2c2fed, #0f12b0, #080a5e);
}

/* Individual colors */
  /* step 1 */ #d0d1fb
  /* step 2 */ #7e80f4
  /* step 3 */ #2c2fed
  /* step 4 */ #0f12b0
  /* step 5 */ #080a5e

Learn more

Step-by-step guide

How to Generate a CSS Color Gradient

Step-by-step guide to creating linear and radial gradients visually and copying the CSS using the DevHexLab Gradient Generator.

In-depth article

CSS Gradients: How to Create Beautiful Gradient Backgrounds

Gradients add depth and personality to any design. Learn how CSS gradients work and how to build the perfect gradient without writing a single line of code by hand.

Related Tools

Color Picker

Pick colors visually and get HEX, RGB, and HSL values

Palette Generator

Generate harmonious color palettes from a base color

Shadow Generator

Create CSS box-shadow and text-shadow with a visual editor