Gradient Controls
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Popular Gradients
How to Use
Enter Your Text
Type the text you want to apply the gradient to in the "Text" input field.
Choose Gradient Type
Select between Linear, Radial, or Conic gradient types.
Adjust Direction or Angle
For linear gradients, choose a direction. For conic gradients, set the angle.
Customize Colors
Add, remove, or adjust color stops and their positions to create your desired gradient.
Copy or Save CSS
Copy the generated CSS code or save it as a CSS file to use in your projects.
About Text Gradients
CSS text gradients allow you to apply beautiful, multi-colored gradients directly to text. This effect was once only possible with images, but modern CSS makes it simple and efficient.
Browser Support:Text gradients are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. For older browsers like Internet Explorer, the text will fall back to a solid color.
Usage Tips:Text gradients work best with bold text and high-contrast color combinations. Experiment with different gradient types and directions to achieve the desired effect.
Related Tools
Less to CSS Converter
Transform your Less code into CSS. Fast, easy, and secure.
Stylus to CSS Converter
Transform your SCSS code into CSS. Fast, easy, and secure.
CSS Beautifier
Format and beautify your CSS code with professional precision
Temperature Unit Converter
Convert between different units of temperature with precision for your scientific and everyday needs
Torque Converter
Convert torque measurements between different units with precision
Base64 Decode Tool
Decode Base64 strings with ease right in your browser.