Gradient Text Generator: Free CSS Gradient Text & Color Effect Tool

Copy plain text keeps only your words. CSS/HTML code must be applied in an editor that supports it. Limit: 10,000 UTF-16 units.

Create Your Gradient Text

Text Content

Direction

Font Size

Colors

Gradient Text

CSS Code

.texttoolbox-gradient {
  color: #667eea; font-size: 2.5rem; font-family: sans-serif; font-weight: 700; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; display: inline-block; max-width: 100%; min-width: 0;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .texttoolbox-gradient {
    background-color: #667eea;
    background-image: linear-gradient(to right, #667eea, #764ba2);
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .texttoolbox-gradient {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText;
  }
}

What Is the Gradient Text Generator?

Build a two-color CSS gradient across a text element. Twelve presets supply color pairs and directions; the eight direction choices and six sizes remain editable. Copy CSS exports a complete stylesheet for the class texttoolbox-gradient. Copy plain text exports your original words without color. This tool does not export PNG, Minecraft codes or BBCode.

How to Use the Gradient Text Generator

Enter your text, including any line breaks.
Choose two colors or one of the twelve presets. Set direction and font size.
Copy CSS into your stylesheet and add class="texttoolbox-gradient" to the element containing your text.
Keep the original text as real HTML text, then test the destination with its actual background and fonts.

How the Gradient Text Generator Works

The gradient is a background image clipped to letter shapes. Transparency is enabled inside a CSS feature query; without clipping support the first color remains solid. A forced-colors rule removes the gradient and restores CanvasText. These fallbacks need destination-browser testing and do not certify contrast.

Gradient Text Generator Example

Default settings and exact example values
Setting or input	Value or result
Input	Gradient Text
Ocean preset	linear-gradient(to right, #667eea, #764ba2)
Default size	2.5rem
Required class	texttoolbox-gradient
Plain-text copy	Gradient Text, without styling

When to Use the Gradient Text Generator

Website heading

Apply the class to an actual text element in a stylesheet you control.

Direction comparison

Compare horizontal and diagonal color placement before choosing a heading style.

Fallback review

Check solid text and forced colors as well as the decorative gradient.

Common Mistakes

Pasting CSS into a profile bio displays code or plain text; it does not install a style. A host stylesheet can override the copied rules. Empty or oversized input disables copying rather than silently replacing your text. If Copy fails, select the CSS output or original input and copy manually.

Tips for Better Results

Check every part of the gradient against the real background. Checking only the two endpoints cannot establish minimum contrast across the gradient. Keep important text readable without this effect. Our preview uses the surrounding site background, which is not part of the exported class.

Technical reference: MDN background-clip. See also MDN forced-colors and Clipboard.writeText.

Frequently Asked Questions

What do I paste into my website?

Put the copied CSS in your stylesheet and add class="texttoolbox-gradient" to your text element. This is a stylesheet, not an HTML snippet.

Can plain-text Copy include the gradient?

No. Copy plain text writes only the input string. CSS effects require a styled text element in a destination you can edit.

What happens without gradient clipping?

The export starts with the first solid color, enables transparency in a feature query and restores CanvasText in forced colors. Test the destination browser and background.

Can I add more color stops?

The controls generate two stops. You can edit the exported linear-gradient manually, but the tool preview will no longer represent that edited CSS.

What are the limits and error recovery?

Input is limited to 10,000 UTF-16 units without truncation. Unsupported controls or invalid settings clear export and disable Copy. On clipboard failure select the original input or CSS output manually.

Gradient Text Generator