How does CSS gradient text work?

Gradient text uses the CSS technique of setting a gradient as the background, then applying background-clip: text and color: transparent so only the text shape reveals the gradient beneath.

Which browsers support gradient text?

All modern browsers support gradient text. Chrome, Firefox, Safari, and Edge all handle background-clip: text correctly. The -webkit- prefix is included in the generated CSS for maximum compatibility.

Can I animate the gradient?

Yes! Enable the animation toggle to smoothly shift the gradient position using a CSS keyframe animation. You can adjust the animation speed in the generated CSS.

How many color stops can I use?

You can use between 2 and 4 color stops. More stops let you create rainbow effects or complex multi-color transitions.

Design 免费无需注册

Gradient Text Generator

Create stunning CSS gradient text effects with live preview

正在加载工具…

关于此工具

Generate beautiful gradient text effects using the CSS background-clip technique. Choose between linear, radial, and conic gradients with up to 4 color stops. Control font size, weight, and gradient angle. Toggle animation to make the gradient flow continuously. Copy the ready-to-use CSS with one click.

使用方法

1 Enter your text in the input field.
2 Choose a gradient type: linear, radial, or conic.
3 Set the angle (for linear gradients) using the slider.
4 Pick 2 to 4 colors using the color pickers.
5 Adjust font size and weight to match your design.
6 Toggle animation if you want a flowing gradient effect.
7 Click 'Copy CSS' to copy the ready-to-use CSS code.

关于此工具

使用方法

常见问题