Two blocks placed on a photo with the WordPress Gutenberg Blur extension: on the left a simple blur, on the right a glass effect with light and shadow

LRob – Gutenberg Blur: blur and frosted glass effect for WordPress blocks

Gutenberg Blur is a WordPress plugin that adds a blur and frosted glass effect to editor blocks: text placed over a photo stays readable, without hiding the photo.

Two blocks placed on a photo with the WordPress Gutenberg Blur extension: on the left a simple blur, on the right a glass effect with light and shadow
On the left the simple blur, on the right the glass effect: the text stays readable and the photo visible.
Download
View source code

The effect applies to the Group, Columns, Column, Row, and Cover blocks. What is behind the block is blurred, like through a window, and everything is adjusted in the editor sidebar without writing any code.

Settings in the editor

Gutenberg Blur effect panel in the sidebar of the block editor: type of effect, color, opacity, blur intensity, saturation, glass border
The settings panel, in the sidebar of the editor.
  • Two effects: simple blur or glass effect
  • Color and opacity of the background
  • Intensity of blur, from 0 to 25 pixels
  • Saturation of colors behind the block
  • Live preview in the editor

The “Blur effect” panel appears as soon as a compatible block is selected: just enable it and choose the type of effect.

A glass effect with light and shadow

Gutenberg Blur effect applied to a Group block in the WordPress editor, with a rendering identical to that of the site
In the editor, the rendering is the same as on the website.
  • Adjustable light source position
  • Illuminated edges according to the angle of the light
  • Shadow cast on the opposite side
  • Internal reflection, adjustable size and diffusion
  • Color and opacity of the border

The rendering in the editor is the same as on the website: what you set is what your visitors see.

Lightweight, no dependencies

  • A small style file, loaded only if needed
  • No external service, no third-party script
  • Translated into French and six other languages

Installation and updates

  1. Download the .zip from the releases page.
  2. Plugins, Add New Plugin, Upload Plugin.
  3. Install and then activate.
  4. Select a Group or Cover block.
  5. Enable the effect in the “Blur effect” panel.

New versions then appear on their own in the WordPress Updates page, just like a plugin from wordpress.org: they come from LRob’s code server, git.lrob.net.

It requires WordPress 6.8 or later, PHP 8.2 or later, and the block editor. The effect relies on the CSS property backdrop-filter, which is supported by recent browsers.

Frequently asked questions

Is Gutenberg Blur free?

Yes. GPL license, no subscription or paid version.

On which blocks does it work?

Group, Columns, Column, Row and Cover: the blocks used to place content on an image.

Does it slow down the site?

No: only a small style file is loaded, and only on the pages that use the effect.

What does an old browser see?

The block retains its semi-transparent background color, without the blurring: the text remains readable.

Source code and license

Gutenberg Blur is released under the GPL 2.0 or later license, like WordPress: open source, free, with no paid version. The code, releases and issue tracker are on git.lrob.net/WP/gutenberg-blur ; for a bug or an idea, open an issue on the repository.

Other LRob WordPress plugins

All the plugins, sorted by use, are on the page LRob Plugins.