Blurry Text Generator
Type your words and watch them go soft. Pick from 8 looks, including soft blur, glow, gradient aura, double vision and motion streak, then set the blur, colours and font. Download a transparent PNG for your design, an SVG that keeps its effect, or copy the CSS for a website. All three come from the same settings, so they match. Free, with no sign-up and no watermark.
Nothing to upload. The text is drawn in your browser, and any picture you add stays on your device.
Code
Blur
Colour
Type
Background
PNG size
Everything is drawn in your browser: nothing is uploaded or stored.
How to make blurry text
- Type your text. Press Enter for a second line.
- Choose a look, then move Blur amount until it feels right.
- Set the colours, or tick Gradient colours for a two-colour blend.
- Pick a font. Heavy fonts hold their shape best under a blur.
- Download the PNG or SVG, or copy the code.
What you can use it for
- Dreamy titles for posters, covers and album art
- Soft word marks for social posts and reels
- Transparent text to lay over photos in your design app
- Blurred headings on a website, in plain CSS
- A word that comes into focus on hover
8 blur looks and how each is built
Each look is a stack of up to three layers of the same text. Blur is the strongest blur at the look’s default setting, as a standard deviation.
| Look | Layers | Blur | Works as text-shadow |
|---|---|---|---|
| Soft blur | 1 | 6 px | Yes |
| Soft glow | 3 | 17.6 px | Yes |
| Neon haze | 3 | 17.5 px | No: use the CSS and HTML |
| Gradient aura | 2 | 24 px | No: use the CSS and HTML |
| Double vision | 2 | 2 px | Yes |
| Colour split | 3 | 3 px | Yes |
| Motion streak | 3 | 27 px | No: use the CSS and HTML |
| Fade to blur | 2 | 15 px | No: use the CSS and HTML |
Looks with a gradient, a one-way streak or a fade can’t be written as text-shadow, so the tool gives you layered CSS and HTML instead.
Which download to use
| You want | Use | Why |
|---|---|---|
| Text over a photo in a design app | Transparent PNG | Works anywhere, and the soft edge blends with the picture |
| A big print or a logo-sized word | SVG | Stays sharp at any size in anything that shows SVG filters |
| A heading on a website | CSS and HTML | Real text that people can select and search engines can read |
| A quick soft shadow on existing text | One line of text-shadow | No extra markup, for the looks that allow it |
How to make blurred text look good
- Blur less than you think. A small blur on large type can do as much as a heavy haze, and the words stay readable.
- Add Sharp text on top to keep a crisp word inside a soft cloud. That is what Soft glow does by default.
- Try dark text on a light background with Double vision: it looks like a misprint rather than a glow.
- For a two-colour blend without any blur, use the CSS Text Gradient tool. For shadows only, the Text Shadow Generator gives you more control.
Blurring text in a picture or a document
This page makes new blurred text. If you already have an image with words you want to hide, use Blur Image, which blurs the area you choose and keeps your file on your device. To soften a photo or a transparent PNG, the Glow Effect tool adds bloom and outer glow. For a PDF, Redact PDF blacks out text for good.
More free text effects
Styling some type?
Text effects and CSS tools that run in your browser: free, private, no sign-up.
Frequently asked questions
What is a blurry text generator?
It turns typed words into soft, out-of-focus lettering you can download or paste into a design. This one does it in your browser, with no upload.
How do I blur text?
Type your words above, choose a look and set Blur amount. Then download a PNG or SVG, or copy the CSS.
Is it free?
Yes. Every look and download is free, with no sign-up and no watermark.
Is the PNG really transparent?
Yes, when Transparent background is ticked. The soft edges fade through real transparency, so the blur blends with whatever you place it on. The colour you see behind the preview is left out of the file.
How do I blur text in CSS?
Use filter: blur(4px) on the element, or color: transparent with a text-shadow such as 0 0 8px black. This tool writes the code for each look, and the CSS format keeps every layer in one small block.
Why is the text-shadow number double the blur number?
The two are measured differently. In filter: blur() the number is the standard deviation of the blur. In text-shadow the blur radius is twice that. So blur(4px) matches a text-shadow blur radius of 8px.
Do the CSS and SVG look the same as the PNG?
Yes. They use the same layers, blur sizes and colours, and our tests render each look all three ways in Chrome and compare the pixels. Each browser draws text in its own way, so expect tiny differences in another browser.
Can I use this to hide text in a screenshot?
No, this tool makes text from scratch. To blur part of a picture, use our Blur Image tool. For anything truly private, a solid black box is safer than a blur. Our Redact PDF tool does that for PDFs.
Can I put the text on my own picture?
Yes. Add a picture under PNG size and choose a canvas. The picture stays on your device. It goes into the PNG only.
Why does the look need so much space around the words?
A blur spreads past the letters. The file leaves room for it, so the soft edge is never cut off.
Which fonts work best?
Heavy fonts with simple shapes, such as Archivo Black or Anton, stay readable under more blur. Thin fonts fade away sooner.
Does the SVG need the font installed?
No. The font is embedded in the file, so it looks the same on any device that shows SVG filters. Some design apps ignore embedded fonts or filters: use the PNG there.
Is blurry text hard to read?
It can be. Keep it to a few big words and put the important details in sharp text. In the CSS, the last layer holds the real text, and the extra layers are hidden from screen readers.
Can it do an animated blur?
Under Motion in the CSS, choose Sharpen on hover or Fade in on load. Both skip the motion for people who have asked their device to reduce it.