---
title: "Gradient Text Pro — Free Framer component · Best of Framer"
description: "Free Framer component · by John Valentine · Text. Gradient Text Pro brings bold, modern typography to life with clean gradient fills and smooth animations."
canonical: "https://framer.elliotli.dev/component/gradient-text-pro"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Gradient Text Pro

# Gradient Text Pro

[View on Framer](https://framer.com/marketplace/components/gradient-text-pro/?via=elliot-li)

![Gradient Text Pro preview image 1](https://framer.elliotli.dev/og/component/gradient-text-pro/19c339571a9bd9b3/1600x1200.jpg)

## Summary

Gradient Text Pro brings bold, modern typography to life with clean gradient fills and smooth animations.

## Description

**Gradient Text Pro** brings bold, modern typography to life with clean gradient fills and smooth animations. Perfect for hero headlines, feature callouts, or interactive accents.

✨ Features

-   🎨 **Modes**: Static ▸ Hover ▸ Infinite
    
-   🌈 **2–3 gradient colors** with seamless blending
    
-   ↔️ **Direction & angle control** (0–360°)
    
-   ⏱ **Speed & easing** for precise animation flow
    
-   🔤 **Font controls**: family, weight, size, line height
    
-   📱 **Responsive & Retina-ready**
    
-   ♿ **Accessible** with semantic tags + aria-labels
    

🚀 Quick Start

-   Insert **Gradient Text Pro** on your canvas.
    
-   Add your text and select **2–3 colors**.
    
-   Choose a **mode** (Static, Hover, Infinite, Once).
    
-   Adjust **speed, direction, and fonts** to match your design.
    

💡 Tips for Premium Look

-   ⏳ Infinite loops feel smoothest at **1.2–2.4s**.
    
-   🌗 Use **bright gradients on dark backgrounds** for luxury contrast.
    
-   🕶 Static gradients are ideal for **brand logos or minimal layouts**.
    

🎯 Use Cases

-   Hero or landing page headlines
    
-   Premium pricing / feature highlights
    
-   CTA hover states and buttons
    
-   Branded typography flourishes
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3443

## Details

- **Author**: John Valentine
- **Published**: 2025-09-23
- **Updated**: 2025-09-23
- **Added**: 2025-09-17
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing