CSS Gradient Text Generator
Create gradient text styles with a live preview and copyable CSS.
This tool processes all data locally on your device.
Input
Gradient
deg
Typography
px
Output
Preview
100%
CSS code
Readme
How does gradient text work in CSS?
CSS has no "text gradient" property. The usual trick is to paint a gradient as the element's background, clip that background to the shape of the letters with background-clip: text, and make the text fill transparent so the gradient shows through.
Tool description
Type your text, pick a start and end color, set the angle, and the tool shows a live preview and gives you the CSS to copy. You can also change the font family, weight and size, so the preview matches what you will use on your page.
The generated rule looks like this:
.gradient-text {
background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}The real output also includes the font settings and wrapping rules.
Features
- Two color linear gradient with an angle from 0 to 360 degrees
- Font family, weight and size controls
- Live preview you can export as an image, plus ready to paste CSS
Comments
Tool info
Created
Last updated
Tags
cssgradienttextgeneratortext gradienttypographybackground clipcolordesignstylewebfrontend
Similar Tools
Generate split complementary colors from any input color: two or more hues spread evenly around its complement on the color wheel, with an adjustable color count and spread angle.
Generate a native bash or zsh command that sends a Wake on LAN magic packet from Linux. Uses Python 3, Perl or bash /dev/udp, so you do not need to install wakeonlan or etherwake.
Drag the four corners of a photo to tilt it in 3D or fit it onto a sign, screen or wall. Exact perspective math, full-size download, runs in your browser.
Embed
Embed this tool anywhere for free. Need help? Check out our guide.
Disclaimer
The tools provided on this website are designed to assist users in solving various problems. While we strive to ensure that the tools are accurate and effective, we do not guarantee or warrant that the output of any tool will be 100% accurate or error-free. The results generated by these tools are provided as-is and should be used with caution. We recommend that users verify any important information or results with additional resources or professional advice, as we cannot be held responsible for any consequences arising from the use of these tools. By using this website, you agree to assume all risks associated with the accuracy and use of the results provided.