Write Less CSS.
/* Generated on cssgen.org */
Make your typography pop. Clip vibrant linear and radial backgrounds directly to your text and generate the specific `-webkit` code required.
/* Generated on cssgen.org */In the past, if a designer wanted a gradient text effect for a hero headline, they had to export it as an image (like a PNG). This was terrible for page speed, awful for accessibility, and meant search engines couldn't read the headline.
Modern CSS solves this elegantly using the background-clip property. By rendering a standard background gradient on a heading element, and then "clipping" that background to the shape of the text, you get beautiful typography that is fully selectable and SEO-friendly. Read the technical documentation on the
MDN Web Docs.
color property as a fail-safe fallback.To create gradient text, you apply a background-image gradient to the text element, use the -webkit-background-clip: text; property to mask the background to the shape of the letters, and finally set -webkit-text-fill-color: transparent; to make the background visible through the text.
Yes, but it strictly requires the -webkit- vendor prefix for compatibility across Chrome, Safari, and Edge. It is safe for production use, but you must include a solid fallback text color for legacy browser versions.
Yes, but it can be tricky. Because the text fill color is transparent, standard text shadows might behave unexpectedly depending on the browser. If you need standard text shadows without gradients, try our Text Shadow Generator.