Blur Text WordPress Plugin

Ever wish you could easily blur text with a Wordpress shortcode?

I just created such a plugin!

You can use it tell your readers jokes, like this one:

Q: What do you call a Seagull that’s flying over the Bay?

A: A Bagel  (Click blurred text to reveal answer.)

If you’re using Internet Explorer or another unsupported browser, the text won’t be blurred, but instead will look blacked out.


Plugin Description

Use the shortcode [blur] [/blur] to blur text.

For example:
[blur]This text will be blurred[/blur]

Optionally, you can set the blur to be removed when the user clicks or hovers on it.

Here are the shortcode examples for that:

[blur toggle=click]This text will be blurred until it’s clicked on[/blur]

[blur toggle=hover]This text will be blurred until it’s hovered over[/blur]

Be default, the blurred text color will be black. You can specify a different color like this:

[blur color=orange]This text will be orange, even when blurred.[/blur]

[blur color=#00FF00]This text will be green, even when blurred.[/blur]

This plugin uses the CSS3 feature “text-shadow” to create the blur and a transparent color font. This plugin only works with the following browsers:
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 9.6+

This plugin allows you to choose what should be done on unsupported browsers. There are currently 3 choices:
1) blackout – This makes the background color the same color as the text (default)
2) none – This doesn’t change the text at all.
3) hide – The text will not be shown on unsupported browsers.

The fallback is specified like this:

[blur fallback=blackout color=red]This text will have a solid red background on unsupported browsers.[/blur]

[blur toggle=click fallback=hide]If you are using IE or another unsupported browser, you will not see this text.[/blur]


  1. Download the plugin here.
  2. Unzip and Install the plugin in wp-content\plugins
  3.  Activate the Plugin
  4. Use one of these shortcodes around your text in posts and pages:

[blur toggle=click][/blur]
[blur toggle=hover][/blur]

Frequently Asked Questions

 Can I have the blurred text revealed only to members, only after a form is submitted, or in some other context?

I may write a premium plugin that has these features. However, I need suggestions as to exactly what type of features I should add.  If you would like me to customize this plugin for you so that it shows the blurred text only in a specific context, I may be albe to program a custom plugin for you.  Please contact me.


Blur Text Screenshot #1
An Example of Blurred Text


Blur Text WordPress Plugin Screenshot #2
An example of blackout text on unsupported browsers.