---
title: "Gradient Reveal Text — Free Framer component · Best of Framer"
description: "Free Framer component · by RS Studio · Text. Gradient Reveal Text is an interactive typography component for Framer that combines cursor-based masking with animated stroke effects."
canonical: "https://framer.elliotli.dev/component/gradient-reveal-text"
---

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

# Gradient Reveal Text

Hover-driven gradient text reveal with m

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

![Gradient Reveal Text preview image 1](https://framer.elliotli.dev/og/component/gradient-reveal-text/6c258b0d42ac2bd0/1600x1200.jpg)

## Summary

Gradient Reveal Text is an interactive typography component for Framer that combines cursor-based masking with animated stroke effects.

## Description

**Gradient Reveal Text** is an interactive typography component for Framer that combines cursor-based masking with animated stroke effects. When the user hovers over the text, a radial mask follows the cursor, revealing a vibrant multi-color gradient underneath.

The component also includes a smooth stroke animation that draws the text outline, adding depth and motion even before interaction. Together, these effects create a premium, modern text experience ideal for landing pages and hero sections.

Designers can fully customize the text content, font size, stroke width, mask radius, animation timing, and gradient colors directly from the Framer property panel.

Features

-   Cursor-following gradient reveal mask
-   Animated stroke drawing effect
-   Multi-color gradient support (5 colors)
-   Fully customizable typography
-   Adjustable mask size and transition
-   Smooth Framer Motion animations
-   SVG-based crisp rendering
-   Perfect for hero text and headings

Property Highlights

-   **Mask Radius** → size of reveal area
-   **Duration** → mask follow smoothness
-   **Stroke Animation Duration** → draw speed
-   **Gradient Colors** → full color control
-   **Font Size & Weight** → typography control

Use Cases

-   Hero section headlines
-   Portfolio intros
-   Creative landing pages
-   Branding text effects
-   Product launch pages

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

-   All · #6489

## Details

- **Author**: RS Studio
- **Published**: 2026-04-15
- **Updated**: 2026-04-14
- **Added**: 2026-03-26
- **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