What is a blur text effect?
It's one of the most elegant ways to introduce a headline: instead of sliding or bouncing in, the words come into focus, like a camera lens adjusting. It's subtle enough for serious brands and noticeable enough to guide the eye to the key message of each section.
How to add blur text in Elementor
- Add a native Heading or Text Editor widget and write your text.
- Style it as usual.
- Open the Advanced tab and find Pro Effects – Texts.
- Select Blur Reveal.
- Set the duration and the delay.
- Preview the published page and scroll to it.
Because it works on Elementor's own widgets, you can add it to headings that already exist on your site without rebuilding them.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Duration | Time to go from blurred to sharp | 1200 ms |
| Delay | Wait before it starts | 0 ms |
| Disable on mobile | Show the text directly on phones | Off |
Tips
- Use it on section titles and hero headlines, not on every paragraph — the effect works because it's rare.
- For a sequence, give consecutive headings a slightly bigger delay (0, 150, 300 ms).
- It pairs well with a calm, minimal design and generous white space.
How it's built
The animation is driven by GSAP ScrollTrigger, so it starts exactly when the text enters the viewport and plays nicely with Smooth Scroll. It respects the visitor's reduced motion setting.
Related effects
- Text Loop — infinite scrolling text.
- Glitch Text — RGB glitch on hover.
- Progress Line — a bar that fills when it comes into view.
