Gradient Text Generator
Create CSS gradient text effects with live preview. Pick colours, direction, font — copy CSS instantly.
Technique: Set a gradient as the element's background, then clip it to the text shape with background-clip: text and hide the original text colour using -webkit-text-fill-color: transparent.
Browser support: All modern browsers (Chrome, Firefox, Safari, Edge). The -webkit-background-clip prefix is still required for Safari.
Linear vs Radial: Linear gradients flow at any angle. Radial gradients radiate outward from the centre — useful for glowing or spotlight effects.
Mid colour: Enable "Add mid colour" to insert a third colour stop between start and end, creating richer three-tone gradients.
Tip: Gradient text is most impactful with bold, large fonts. Use font-weight: bold or a heavy typeface like Impact for maximum visibility.
About Gradient Text Generator
Gradient Text Generator lets you create stunning CSS gradient text effects right in your browser. Pick two or three colours, choose a direction or custom angle, adjust font size and family — and see the result live. Copy the ready-to-use CSS with one click. Uses the standard CSS background-clip: text technique — no images, no SVG, pure CSS. 100% client-side, nothing leaves your device.