Gradient Text Generator

Apply gradient colors to text using CSS. Type your text, pick colors, and copy the generated CSS code.

Gradient Text

Text

Color 1

Color 2

Angle: 90deg

Font Size: 48px

CSS Code

.gradient-text {
  background: linear-gradient(90deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: bold;
}

How CSS Gradient Text Works

CSS gradient text uses a combination of properties: a gradient background, background-clip: text to clip the background to the text shape, and -webkit-text-fill-color: transparent to make the original text color transparent, revealing the gradient underneath.

Browser Compatibility

The gradient text effect works in all modern browsers including Chrome, Firefox, Safari, and Edge. The -webkit- prefix is still needed for broad compatibility. The generated CSS includes both prefixed and unprefixed properties.