{"id":10193,"date":"2026-11-10T21:10:01","date_gmt":"2026-11-10T20:10:01","guid":{"rendered":"https:\/\/www.lrob.fr\/wordpress\/plugins\/lrob-gutenberg-blur\/"},"modified":"2026-11-10T21:10:01","modified_gmt":"2026-11-10T20:10:01","slug":"lrob-gutenberg-blur","status":"publish","type":"page","link":"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-gutenberg-blur\/","title":{"rendered":"LRob \u2013 Gutenberg Blur: blur and frosted glass effect for WordPress blocks"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><strong>Gutenberg Blur<\/strong> 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.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af39f38b6374&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af39f38b6374\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-flou-et-verre.webp\" alt=\"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\" class=\"wp-image-10182\" srcset=\"https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-flou-et-verre.webp 1024w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-flou-et-verre-300x164.webp 300w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-flou-et-verre-150x82.webp 150w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-flou-et-verre-768x420.webp 768w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-flou-et-verre-600x328.webp 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">On the left the simple blur, on the right the glass effect: the text stays readable and the photo visible.<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/git.lrob.net\/WP\/gutenberg-blur\/releases\" target=\"_blank\" rel=\"noopener\">Download<\/a><\/div>\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/git.lrob.net\/WP\/gutenberg-blur\" target=\"_blank\" rel=\"noopener\">View source code<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reglages\">Settings in the editor<\/h2>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-794e3cfa wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af39f38b896b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af39f38b896b\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"808\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-panneau-reglages.webp\" alt=\"Gutenberg Blur effect panel in the sidebar of the block editor: type of effect, color, opacity, blur intensity, saturation, glass border\" class=\"wp-image-10183\" srcset=\"https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-panneau-reglages.webp 278w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-panneau-reglages-103x300.webp 103w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-panneau-reglages-52x150.webp 52w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The settings panel, in the sidebar of the editor.<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Two effects: simple blur or glass effect<\/li>\n\n<li>Color and opacity of the background<\/li>\n\n<li>Intensity of blur, from 0 to 25 pixels<\/li>\n\n<li>Saturation of colors behind the block<\/li>\n\n<li>Live preview in the editor<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The \u201cBlur effect\u201d panel appears as soon as a compatible block is selected: just enable it and choose the type of effect.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"effet-de-verre\">A glass effect with light and shadow<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6af39f38b9102&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6af39f38b9102\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"575\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur.webp\" alt=\"Gutenberg Blur effect applied to a Group block in the WordPress editor, with a rendering identical to that of the site\" class=\"wp-image-10184\" srcset=\"https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur.webp 1440w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur-300x120.webp 300w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur-1024x409.webp 1024w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur-150x60.webp 150w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur-768x307.webp 768w, https:\/\/www.lrob.fr\/wp-content\/uploads\/2026\/11\/gutenberg-blur-reglages-editeur-600x240.webp 600w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">In the editor, the rendering is the same as on the website.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adjustable light source position<\/li>\n\n<li>Illuminated edges according to the angle of the light<\/li>\n\n<li>Shadow cast on the opposite side<\/li>\n\n<li>Internal reflection, adjustable size and diffusion<\/li>\n\n<li>Color and opacity of the border<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The rendering in the editor is the same as on the website: what you set is what your visitors see.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"leger\">Lightweight, no dependencies<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A small style file, loaded only if needed<\/li>\n\n<li>No external service, no third-party script<\/li>\n\n<li>Translated into French and six other languages<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installation\">Installation and updates<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download the .zip from <a href=\"https:\/\/git.lrob.net\/WP\/gutenberg-blur\/releases\" target=\"_blank\" rel=\"noopener\">the releases page<\/a>.<\/li>\n\n<li>Plugins, Add New Plugin, Upload Plugin.<\/li>\n\n<li>Install and then activate.<\/li>\n\n<li>Select a Group or Cover block.<\/li>\n\n<li>Enable the effect in the \u201cBlur effect\u201d panel.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">New versions then appear on their own in the WordPress <strong>Updates<\/strong> page, just like a plugin from wordpress.org: they come from LRob\u2019s code server, git.lrob.net.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently asked questions<\/h2>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Is Gutenberg Blur free?<\/summary>\n<p class=\"wp-block-paragraph\">Yes. GPL license, no subscription or paid version.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>On which blocks does it work?<\/summary>\n<p class=\"wp-block-paragraph\">Group, Columns, Column, Row and Cover: the blocks used to place content on an image.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Does it slow down the site?<\/summary>\n<p class=\"wp-block-paragraph\">No: only a small style file is loaded, and only on the pages that use the effect.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>What does an old browser see?<\/summary>\n<p class=\"wp-block-paragraph\">The block retains its semi-transparent background color, without the blurring: the text remains readable.<\/p>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"code-source\">Source code and license<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/git.lrob.net\/WP\/gutenberg-blur\" target=\"_blank\" rel=\"noopener\">git.lrob.net\/WP\/gutenberg-blur<\/a> ; for a bug or an idea, open an <a href=\"https:\/\/git.lrob.net\/WP\/gutenberg-blur\/issues\" target=\"_blank\" rel=\"noopener\">issue on the repository<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"autres-extensions\">Other LRob WordPress plugins<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-email-toolkit\/\">Email Toolkit<\/a> : emails, forms and newsletters<\/li>\n\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-calendar\/\">LRob Calendar<\/a> : event calendar<\/li>\n\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/qr-code-maker\/\">QR Code Maker<\/a> : QR codes with scan tracking<\/li>\n\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-cookie-consent\/\">Cookie Consent<\/a> : GDPR cookie banner<\/li>\n\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-age-gate\/\">Age Gate<\/a> : age verification<\/li>\n\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-la-carte\/\">La Carte<\/a> : bar or restaurant menu<\/li>\n\n<li><a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/lrob-hiboutik\/\">LRob Hiboutik<\/a> : Hiboutik point of sale and WooCommerce<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All the plugins, sorted by use, are on the page <a href=\"https:\/\/www.lrob.fr\/en\/wordpress\/plugins\/\">LRob Plugins<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Gutenberg Blur est une extension WordPress qui ajoute un effet de flou et de verre d\u00e9poli aux blocs de l\u2019\u00e9diteur : un texte reste lisible pos\u00e9 sur une photo, sans la cacher. L\u2019effet s\u2019applique aux blocs Groupe, Colonnes, Colonne, Rang\u00e9e et Couverture. Ce qui se trouve derri\u00e8re le bloc est flout\u00e9, comme \u00e0 travers une [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10182,"parent":8838,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10193","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/pages\/10193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/comments?post=10193"}],"version-history":[{"count":0,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/pages\/10193\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/pages\/8838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/media\/10182"}],"wp:attachment":[{"href":"https:\/\/www.lrob.fr\/en\/wp-json\/wp\/v2\/media?parent=10193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}