# CSS Gradient & Metallic Text Generator

> Fill text with a gradient, a metallic sheen or a chrome effect using background-clip.

Gradient text is a background gradient clipped to the glyph shapes: set the gradient as the element's background-image, clip it to the text with background-clip, and make the text itself transparent so the gradient shows through. The metallic presets work by reversing the gradient partway along, because a highlight band is what reads as a reflection where a plain fade reads as a fade. Keep a solid color as a fallback — if background-clip fails the text becomes invisible rather than merely unstyled.

**URL:** https://convertto.tech/t/gradient-text-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Choose the effect.
2. Pick the from.
3. Pick the via.
4. Pick the to.
5. Set the angle.
6. Set the font size.
7. Choose the weight.
8. The result appears immediately — copy or download it.

## FAQ

### Why is my text invisible?

color: transparent with a background-clip that did not apply leaves nothing to see. Ship a solid color first and override it, so an unsupported browser gets readable text instead of a blank line.

### Is gradient text accessible?

Contrast checkers cannot measure it, and the ratio genuinely varies across the word. Keep the darkest stop above 4.5:1 against the background, and never use it for body copy — it belongs on short headings where size compensates.

### Does it work on multi-line text?

Yes, but the gradient spans the whole element, so each line gets a slice of it rather than the full sweep. Setting display: inline restarts it per line fragment if you would rather each line carried the complete gradient.

## Related tools

- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Gradient Generator](https://convertto.tech/t/gradient-generator): Build linear, radial and conic CSS gradients and copy the code.
- [CSS Text Shadow Generator](https://convertto.tech/t/text-shadow-generator): Design text shadows, outlines and glow effects with a live preview.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.
- [Type Scale Generator](https://convertto.tech/t/type-scale-generator): Build a modular typographic scale and copy it as CSS custom properties.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [Installed Font Checker](https://convertto.tech/t/font-availability-checker): Test which system fonts are actually available before you rely on them in a font stack.
- [Text Repeater](https://convertto.tech/t/text-repeater): Repeat any text a set number of times, separated by newlines, spaces or nothing.