Skip to content

CSS Gradient Generator

Generate a CSS gradient that will show a transition between two or more colors

Generated CSS:

background: linear-gradient(to right, #ff7eb3, #6a82fb);

What is CSS Gradient Generator?

A CSS gradient is a smooth transition from one color to another. Gradients are drawn by the browser, so they need no image file and stay sharp at any size.

What this tool does

Lets you choose two colors and a direction, shows a live preview and gives you the linear-gradient CSS to copy.

How to use it

  1. Pick the start and end colors.
  2. Choose a direction, such as to right or to bottom right.
  3. Copy the generated CSS.

Did you know?

  • A gradient is a type of image in CSS, so it is used with background or background-image, not background-color.
  • Because gradients are generated by code, they are usually much smaller than a picture of the same effect.

More tools in this category