CSS Gradient Generator

What is a gradient?

Gradients are a CSS objects of type image consisting of a progressive transition between two or more colors. There are two types of gradients: linear-gradients that transition along a straight line and radial-gradients that radiate from an origin.

Using gradients you can add more colors to your website to make it more unique, friendly and welcoming.

Linear Gradients

linear-gradient() is a CSS function that creates a transition between two or more colors along a straight line.

Syntax:

1. A straight line gradient, Starting Blue and finishing Red.

   Code:
   

   CSS

   COPY

   Code Copied!

   background: linear-gradient(to right, blue, red);

   Result:

2. A gradient tilted 45 degrees, Starting Cyan and finishing Yellow.

   Code:
   

   CSS

   COPY

   Code Copied!

   background: linear-gradient(45deg, cyan, yellow);

   Result:

Radial Gradients

radial-gradient() is a CSS function that creates a transition between two or more colors that radiate from an origin.

Syntax:

1. A gradient at the center of its container, Starting Red and finishing Blue.

   Code:
   

   CSS

   COPY

   Code Copied!

   background: radial-gradient(circle at center, red, blue);

   Result:

Why is this tool useful?

This tool helps designers and developers to experiment with lots of gradient variations by changing the colors, angle, color position, etc. in a much faster and effective way.

Also, They can copy and paste the generated CSS code to their project to see the final result and make the necessary changes.

About this tool

CSS Gradient Generator is a free tool for creating background gradients and easily copy-paste the generated CSS code to your project.

Similar Tools