Text Gradient Generator
Apply stunning mesh gradients to any text. Type your text, choose a color palette, and copy the CSS code — all in your browser, free.
CSS Code
.gradient-text {
font-size: 4.5rem;
font-weight: 700;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221920%22%20height%3D%221080%22%20viewBox%3D%220%200%201920%201080%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%20x%3D%22-686%22%20y%3D%22-943%22%20width%3D%223094%22%20height%3D%222586%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2275%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22grain%22%20x%3D%22-686%22%20y%3D%22-943%22%20width%3D%223094%22%20height%3D%222586%22%20filterUnits%3D%22userSpaceOnUse%22%20primitiveUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22linearRGB%22%3E%0A%09%09%09%09%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.2%22%20numOctaves%3D%224%22%20seed%3D%2215%22%20stitchTiles%3D%22no-stitch%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221920%22%20height%3D%221080%22%20result%3D%22turbulence%22%2F%3E%0A%09%09%09%09%3CfeSpecularLighting%20surfaceScale%3D%2210%22%20specularConstant%3D%221.21%22%20specularExponent%3D%2220%22%20lighting-color%3D%22%23fff%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221920%22%20height%3D%221080%22%20in%3D%22turbulence%22%20result%3D%22specularLighting%22%3E%0A%09%09%09%09%09%3CfeDistantLight%20azimuth%3D%223%22%20elevation%3D%22100%22%2F%3E%0A%09%09%09%09%3C%2FfeSpecularLighting%3E%0A%09%09%09%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M%2041.26%20345.62%20L%20487.42%20411.35%20L%20918.68%20459.90%20L%201162.21%20759.24%20L%20978.44%201092.52%20L%20734.49%201343.88%20L%20321.00%201492.02%20L%20-124.46%201465.63%20L%20-376.23%201124.56%20L%20-535.76%20816.19%20L%20-213.98%20591.68%20Z%22%20fill%3D%22%23609EFF%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201757.93%20327.45%20L%202257.00%20535.00%20L%202122.12%20910.66%20L%201619.13%201032.68%20L%201050.65%20888.35%20L%201216.91%20394.37%20Z%22%20fill%3D%22%23B6B8FD%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201239.14%20182.07%20L%201278.55%20-122.21%20L%201538.46%20-166.76%20L%201670.75%20-285.61%20L%201877.77%20-277.89%20L%202079.83%20-157.35%20L%202079.61%2050.13%20L%202046.27%20263.75%20L%201987.86%20494.85%20L%201656.79%20487.74%20L%201562.78%20531.69%20L%201274.89%20301.28%20Z%22%20fill%3D%22%23609EFF%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20131.99%20-210.27%20L%20357.67%20-554.23%20L%20466.32%20-792.12%20L%20811.04%20-691.16%20L%201013.43%20-574.92%20L%201260.84%20-256.67%20L%201404.37%2063.22%20L%201172.34%20489.79%20L%20836.90%20558.37%20L%20567.92%20651.34%20L%20361.67%20300.70%20L%20226.09%20152.78%20Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20718.10%20656.18%20L%20529.32%209.68%20L%20829.82%20-575.35%20L%201269.33%20-584.29%20L%201594.90%20135.20%20L%201280.03%20552.21%20Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22%23FFFFFF%22%20filter%3D%22url(%23grain)%22%20opacity%3D%220.65%22%2F%3E%3C%2Fsvg%3E");
background-size: cover;
background-position: center;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Choose a Palette
Create Full Mesh Gradients
Love the gradient on your text? Open the full editor to create background gradients, adjust shapes, and export in any format.
Open Gradient EditorWhat is a Text Gradient Generator?
A text gradient generator applies colorful gradient fills to text using CSS. Instead of a flat color, your text is filled with a smooth blend of multiple colors — in this case, beautiful mesh gradients that create organic, flowing color transitions. The technique uses the CSS background-clip: text property to mask a background gradient to the shape of your text.
How to Use CSS Text Gradients
Type your text in the input field above, select a color palette that matches your design, and adjust the font size. The preview updates in real time. When you're happy with the result, click “Copy CSS” to get the code. Paste it into your stylesheet and apply the .gradient-text class to any HTML element. The gradient works on headings, paragraphs, spans, and any text element.
Browser Compatibility
The background-clip: text CSS property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The -webkit- prefix is included for maximum compatibility. The generated CSS includes a transparent color fallback to ensure graceful degradation.
Mesh Gradients vs Linear Gradients for Text
While most text gradient generators use simple linear or radial gradients, Better Gradient applies mesh gradients to your text. Mesh gradients blend multiple colored shapes with blur effects, producing far more complex and organic color transitions than a basic two-color linear gradient. The result is typography that looks premium and unique.
Need gradients for your Tailwind project? Try our Tailwind Gradient Generator for ready-to-use Tailwind CSS code.