Gradient Text Generator

Type your text, pick two colors, choose a direction — and get a live preview plus copyable CSS for gradient text. Free, no signup.

CSS gradient text uses the background-clip: text technique to apply a gradient as a text fill. It's widely supported in modern browsers and adds visual interest to headings and hero text. Use this free gradient text generator to find the right combination for your design.