Back to all snippets
Library/CSS/Gradient Text
cssbeginnertextgradienteffects

How to implement Gradient Text in Css

Apply gradient color to text

Quick Answer

Apply a `background` gradient, then set `background-clip: text` and `-webkit-text-fill-color: transparent` to reveal the gradient through the text shape.

Code Snippet

1.gradient-text {
2  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
3  -webkit-background-clip: text;
4  -webkit-text-fill-color: transparent;
5  background-clip: text;
6}

What is Gradient Text?

CSS gradient text works by applying a gradient as the background of the element and then clipping it to the text shape using background-clip: text and making the text color transparent so the background shows through. This technique is widely supported and produces sharp, scalable gradient text at any font size.

How It Works

  1. 1`background: linear-gradient(...)` sets the gradient as the element's background.
  2. 2`background-clip: text` clips the background to the text glyphs only.
  3. 3`-webkit-text-fill-color: transparent` makes the text itself transparent so the gradient background shows through.
  4. 4The `-webkit-background-clip` prefix is still required alongside the standard property for full browser support.

Common Use Cases

  • Hero headings - Make the main headline visually striking
  • Brand names - Style a logo or product name with brand gradient colors
  • Badges and labels - Highlight important labels with color gradients
  • Pull quotes - Make blockquotes stand out with gradient styling

Key Benefits

  • Works with any CSS gradient including linear, radial, and conic
  • Scales perfectly at any font size — fully vector-based
  • No images or SVGs needed
  • Supported in all modern browsers

Common Mistakes to Avoid

  • Forgetting `-webkit-background-clip` alongside `background-clip` — Chrome still needs the prefixed version.
  • Using `color: transparent` instead of `-webkit-text-fill-color: transparent` — in some browsers `color` is overridden by the visited link colour.
  • Applying on a block element with a wide background — the gradient spans the full element width, not just the text width. Add `display: inline-block` to constrain it.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more css examples

Frequently Asked Questions

Is CSS gradient text accessible?

Yes — the text is real DOM text so it is selectable, copyable, and readable by screen readers. Ensure sufficient contrast between the lightest gradient colour and the background for WCAG compliance.

Related Snippets

css
beginner
Flexbox Centering
Center elements horizontally and vertically with flexbox
layoutflexboxcentering
css
beginner
Truncate Text
Truncate text with ellipsis for single and multiple lines
texttypographyutilities
css
intermediate
Glassmorphism Effect
Create frosted glass effect with backdrop blur
effectsmodernui

About This Css Code Snippet

This free css code snippet for gradient text is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement gradient text quickly and correctly.

All snippets in the Snippetly library follow css best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses css.

Tags: text, gradient, effects  | Language: css  | Difficulty: beginner  | Category: CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets