CSS Text Gradient Generator

Text gradients are basically background gradients but clipped to text.

Which means that you only have to write a basic background gradient and a two additional lines of code to create text gradient.

Linear Text Gradients

Syntax:

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

   Code:
   

   CSS

   COPY

   Code Copied!

   background: linear-gradient(to right, blue, red);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

   Result:

   CSS Text Gradient

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

   Code:
   

   CSS

   COPY

   Code Copied!

   background: linear-gradient(45deg, cyan, yellow);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

   Result:

   CSS Text Gradient

Radial Gradients

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);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

   Result:

   CSS Text Gradient

Why is this tool useful?

This tool helps designers and developers to experiment with lots of text 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 Text Gradient Generator is a free tool for creating text gradients and easily copy-paste the generated CSS code to your project.

Similar Tools