Color Utility Logo

Gradient Lab

Create and customize stunning, seamless gradients.

Gradient Preview

Configuration

Color Stops

Gradient Lab FAQ

What's the difference between the gradient modes?

Each mode creates a different type of gradient, giving you creative flexibility:

  • Linear: Colors transition in a straight line. Use the Angle control to change the direction.
  • Radial: Colors radiate from a central point. You can choose a circle or ellipse shape.
  • Mesh: A modern, freeform gradient created by blending multiple color points for an organic, flowing effect.
How do I control the colors?

In the 'Color Stops' or 'Color Points' panel, you can:

  • Change a color using the color picker or by typing a hex code.
  • For Linear gradients, the 'Stop' slider determines where that color appears on the gradient.
  • For Mesh gradients, use the sliders to control the X/Y position and size of each color 'blob'.
How can I get the CSS code?
The 'Export CSS' card shows the generated CSS code for your current gradient. Click the copy icon to copy the code to your clipboard, ready to be pasted into your project's stylesheet.
Loading...