---
title: "How to Create a Text Shimmer Effect in Framer"
description: "Build a text shimmer effect in Framer with a gradient sweep technique — the working code, tuning notes, and where this subtle effect earns its place."
canonical_url: "https://framerhub.io/blog/text-shimmer-framer"
last_updated: "2027-01-29T00:00:00.000Z"
---
Text shimmer — a soft band of light that sweeps across a headline, like a reflection passing over polished metal or silk — is one of the most understated effects in this series, and one of the most consistently used by premium SaaS and AI product brands specifically because it reads as expensive without demanding much visual attention. Here's exactly how it's built.
## The Technique: `background-clip: text`
The entire effect comes down to one CSS trick: applying a gradient as an element's `background`, then using `background-clip: text` (with `color: transparent`) to make that gradient visible only through the shape of the text characters themselves. Animate the gradient's horizontal position, and the visible portion of the gradient sweeps across the letterforms as if light were passing over them.
This is different from — and simpler than — techniques that try to actually change the text's color values over time. You're not animating color; you're animating a gradient's position underneath a text-shaped mask, which is both cheaper to render and easier to control precisely.
It's the same core technique used in loading-state "skeleton shimmer" placeholders across the web, repurposed here as a deliberate, finished-content decoration rather than a loading indicator — which is exactly why getting the pacing right (covered below) matters so much. Use the wrong rhythm and a visitor's brain reads your finished headline as still-loading content, which undermines the polish the effect is supposed to add rather than enhancing it.
## Why This Effect Reads as "Premium"
Shimmer works partly because of a visual association most people have absorbed without consciously noticing it: reflective, light-catching materials (polished metal, silk, glass) read as higher-value than flat, matte ones, and a slow light sweep across text mimics exactly that kind of reflective surface. It's the same underlying visual cue jewelry photography and luxury product shots lean on — light moving across a surface signals quality. Applied to typography, a subtle version of that same cue is enough to make a headline feel more considered without any literal material or texture actually being present.
## Building It With a Code Override
```jsx
import { motion } from "motion/react"
import { addPropertyControls, ControlType } from "framer"
export default function TextShimmer(props) {
const { text, baseColor, shimmerColor, fontSize, fontWeight, duration, pauseBetween } = props
return (
{text}
)
}
addPropertyControls(TextShimmer, {
text: { type: ControlType.String, defaultValue: "Shimmer text" },
baseColor: { type: ControlType.Color, defaultValue: "#666666" },
shimmerColor: { type: ControlType.Color, defaultValue: "#ffffff" },
fontSize: { type: ControlType.Number, defaultValue: 48, min: 12, max: 120 },
fontWeight: { type: ControlType.Number, defaultValue: 700, min: 300, max: 900 },
duration: { type: ControlType.Number, defaultValue: 2.5, min: 1, max: 6, step: 0.5 },
pauseBetween: { type: ControlType.Number, defaultValue: 1.5, min: 0, max: 5, step: 0.5 },
})
```
A few details worth calling out since they're easy to get subtly wrong:
- **The gradient needs a wide backgroundSize** (200% in the snippet) relative to the element, so there's enough travel distance for the shimmer band to sweep fully across and off the text, rather than the animation looking clipped at the edges.
- **Both WebkitBackgroundClip/backgroundClip: "text" and WebkitTextFillColor/color: "transparent" are needed together** — Safari specifically still relies on the `-webkit-` prefixed properties in some contexts, so include both the standard and prefixed versions rather than just one.
- **repeatDelay is what keeps this from feeling like a loading skeleton.** A shimmer that loops with zero pause between sweeps reads as "this is still loading" to most visitors, since that's the exact pattern used by loading-state skeleton screens. A deliberate pause (1-2 seconds) between sweeps is what signals "this is a finished, decorative accent" instead.
## Tuning the Shimmer Band Width
The gradient stops in the snippet (`0% / 40% / 50% / 60% / 100%`) control how wide the visible shine band is relative to the whole gradient travel distance:
- **Narrow band** (stops closer together, e.g., 45%/50%/55%) — a tight, quick flash of light, more dramatic and attention-grabbing.
- **Wide band** (stops farther apart, e.g., 30%/50%/70%) — a broader, softer wash of light, calmer and more premium-feeling.
Most brand-appropriate shimmer effects lean toward the wider, softer end of this range — a narrow, sharp flash tends to read as more of a notification or alert cue than a subtle brand accent, unless that more attention-grabbing feel is specifically what you want.
## Choosing Colors That Actually Shimmer
The effect only works if there's real contrast between `baseColor` and `shimmerColor` — a shimmer color too close to the base color produces an animation so subtle it's barely visible, while too extreme a jump (dark gray text shimmering to pure white) can look harsh rather than elegant. A reliable starting formula: pick your base text color, then set the shimmer color 30-40% lighter (for dark text) or with a subtle warm or cool tint rather than pure white, which tends to read as more intentional and less like a generic loading state.
For a gradient-forward brand, you can also shimmer between two brand colors rather than a neutral base-to-white sweep — this reads more like an animated gradient accent than a literal "light passing over metal" effect, which might suit certain brand personalities better than the classic metallic shimmer.
## Where Text Shimmer Works Best
- **Product or feature headlines on AI and SaaS landing pages**, where the effect has become something of a visual shorthand for "premium, cutting-edge product."
- **Badge or tag text** ("New," "Pro," "Beta") where a small amount of ongoing motion draws the eye without demanding it.
- **A single accent word within a larger, static headline** — shimmering only "faster" in "Ship faster with
Product
" rather than the whole sentence, which keeps the effect proportional to how much emphasis that one word deserves.
It's a poor fit for anything users need to read quickly and completely — like rotating text, it's an effect for short, prominent copy, not paragraphs. It also tends to look dated or overused if applied to more than one or two text elements per page; like most attention-drawing effects in this series, its impact depends on scarcity.
## Common Mistakes
- **No pause between sweeps**, making the effect read as a loading state instead of a finished design accent — as covered above, `repeatDelay` is the fix.
- **Too much contrast between base and shimmer color**, producing a harsh flash rather than a subtle sheen.
- **Applying shimmer to small text sizes.** The effect is much less legible and less visually effective below roughly 20-24px — reserve it for headline-scale text where the gradient sweep has enough surface area to actually read clearly.
- **Forgetting -webkit- prefixed properties**, which can cause the effect to silently fail (showing solid, non-transparent text) in Safari specifically while working fine in Chrome during testing.
## Performance Notes
This effect is cheap to render — you're animating a `background-position` value, which is one of the more GPU-friendly properties to animate continuously, unlike layout-affecting properties like `width` or `top`. It's safe to run indefinitely on a page without meaningful performance concern, even alongside other animated elements, which is part of why it's such a popular default choice for always-visible hero headlines specifically.
This performance profile is also why text shimmer pairs so well with other, more expensive effects elsewhere on the same page — since it costs almost nothing on its own, it doesn't meaningfully eat into the frame budget you might need for a heavier effect like a WebGL background or a blurred glass panel running simultaneously. If you're stacking several effects from across this series on one hero section, shimmer is one of the safer ones to leave running continuously rather than gating behind interaction.
## Shimmer on Buttons and Badges vs. Headlines
While this guide focuses on headline text, the same gradient-sweep technique works on button labels and small badge text with a couple of adjustments. Because badges and button labels are smaller and often sit on a colored fill rather than a plain background, the shimmer band typically needs to be narrower and faster (a duration closer to 1-1.5 seconds) to read clearly at that scale — the wider, slower sweep that looks elegant on a 48px headline can look sluggish and hard to perceive on 14px badge text. If you're shimmering a "New" or "Pro" badge specifically to draw attention to it, err toward the faster, narrower end of the tuning range covered earlier rather than the calmer headline defaults.
## Accessibility Note
As with any continuously looping animation, respect `prefers-reduced-motion` by disabling the sweep (or reducing it to a single, slow pass rather than an infinite loop) for visitors who've set that preference — the underlying text content and its meaning are unaffected either way, since this is a purely decorative color effect layered on top of real, readable text.
If you'd rather not tune gradient stops and timing by hand, this pairs naturally with the rest of a typography-forward hero — our [rotating text guide](/blog/rotating-text-framer) and [text pressure effect guide](/blog/text-pressure-effect-framer) cover two related headline techniques, and FramerHub's [component library](/components) has additional typography effects available through the [Components plugin](/plugins/framer-components) if you want a broader set of options to browse rather than building each one individually.
## FAQ
**How does a text shimmer effect actually work?**
A gradient (typically dark-light-dark) is applied as the text's background using background-clip: text, which makes the gradient visible only through the letterforms. Animating the gradient's position left to right produces the sweeping shine, looping continuously or on a set interval.
**Is background-clip: text well supported across browsers?**
Yes, with the -webkit- prefix included alongside the standard property, background-clip: text is reliably supported across all modern browsers, including Safari, Chrome, Firefox, and Edge.
**Should shimmer text loop continuously or trigger occasionally?**
For most brand use, an occasional sweep (every few seconds, with a pause between) reads as more premium and less distracting than a continuous, tight loop. A shimmer that never stops moving starts to feel more like a loading skeleton than an intentional design accent.
**Can I use text shimmer on body copy?**
It's not recommended — shimmer works because it draws attention to a small amount of prominent text. Applied to a paragraph of body copy, the moving gradient actively interferes with reading rather than adding polish.
**Is text shimmer the same as a loading skeleton shimmer?**
The underlying gradient-sweep technique is similar, but the use case is different: a loading skeleton shimmer indicates content is still loading, while a text shimmer effect on a finished headline is a decorative brand accent applied to real, already-rendered content.