Skip to main content
Penguin ToolsPenguin Tools

CSS Gradient Text Generator

Generate CSS code to apply gradients to text. Preview colors, direction, and range adjustments in real time.

Gradient Text
0%
100%
.gradient-text {
  background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}
Share this tool
📖

How to Use

Step 1

Enter Text

Enter Text

Enter the text to apply a gradient to

Step 2

Set Gradient

Set Gradient

Adjust gradient colors, direction, type, etc.

Step 3

Copy CSS

Copy CSS

Copy the generated CSS code

✨

Features

Real-time Preview

Preview gradient text in real time

Various Gradients

Support linear, radial, conic gradients with multiple color stops

Presets Included

Apply popular gradient presets with one click

❓

FAQ

A CSS technique using background-clip: text to apply gradient backgrounds to text.

🔗Related Tools

🎨
Design Tools

Color Code Converter

Convert between HEX, RGB, and HSL color codes. Use the color picker and real-time preview for intuitive color selection.

🎨
Design Tools

Color Picker

Pick colors intuitively using a color wheel and sliders. Get and copy color codes in HEX, RGB, and HSL formats.

🎨
Design Tools

Image Color Extractor

Automatically detect dominant colors from an image and generate a color palette. You can also click anywhere on the image to pick individual colors.

🎯
Design Tools

Image Average Color Picker

Calculate the average color of an entire image or a selected area. Useful for choosing color schemes or thumbnail background colors.

🌈
Design Tools

CSS Gradient Generator

Visually create CSS gradients with drag controls. Supports linear, radial, and conic gradient types with presets.

🔲
Design Tools

CSS Box Shadow Generator

Visually create CSS box-shadow with sliders. Supports multiple shadows and inset shadows.