TREQLOtools.
Saved toolsExplore tools
Color & design

CSS gradient generator

Build a two-color linear gradient and copy its ready-to-use CSS.

Make it yours

Processed in your browser

Your result

A little input. A useful result.

Adjust the example inputs, then select Generate gradient.

A LITTLE KNOW-HOW

About this tool

Create a linear CSS gradient by choosing two endpoint colors and an angle. The preview uses the same CSS string as the output, so you can try a direction and copy it straight into your background declaration.

How to use it

  1. 1

    Choose the start and end colors.

  2. 2

    Set the gradient direction from 0 to 360 degrees.

  3. 3

    Generate the preview and copy the background CSS.

Questions, answered

How are CSS gradient angles measured?

In a CSS linear gradient, 0 degrees points upward, 90 degrees points right, 180 degrees points down and 270 degrees points left.

Does the gradient guarantee readable text?

No. Text contrast varies along the gradient. Use the contrast checker for the colors behind your text and check the least favorable background area.

KEEP THE GOOD WORK GOING

Handy next steps.

More in this collection