{"id":394649,"date":"2026-10-29T10:51:01","date_gmt":"2026-10-29T10:51:01","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/backdrop-filters\/"},"modified":"2026-10-29T10:50:44","modified_gmt":"2026-10-29T10:50:44","slug":"glass-act","status":"publish","type":"plugin","link":"https:\/\/fa.wordpress.org\/plugins\/glass-act\/","author":14039798,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.0","stable_tag":"1.0.0","tested":"7.1.4","requires":"6.6","requires_php":"7.4","requires_plugins":null,"header_name":"Glass Act \u2013 Backdrop Filters for Blocks","header_author":"Job Thomas","header_description":"Adds backdrop filters (blur, brightness, contrast, grayscale, hue, invert, saturation, sepia) next to the background color of blocks.","assets_banners_color":"8b2fa2","last_updated":"2026-10-29 10:50:44","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/github.com\/jobthomas\/glass-act","header_author_uri":"https:\/\/job.blog","rating":0,"author_block_rating":0,"active_installs":0,"downloads":51,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"jobthomas","date":"2026-10-29 10:50:44","revision":3772676}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3772700,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3772700,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3772700,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3772700,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.jpg":{"filename":"screenshot-1.jpg","revision":3772797,"resolution":"1","location":"assets","locale":"","width":1280,"height":800},"screenshot-2.jpg":{"filename":"screenshot-2.jpg","revision":3772700,"resolution":"2","location":"assets","locale":"","width":1280,"height":800},"screenshot-3.jpg":{"filename":"screenshot-3.jpg","revision":3772700,"resolution":"3","location":"assets","locale":"","width":1280,"height":800},"screenshot-4.jpg":{"filename":"screenshot-4.jpg","revision":3772700,"resolution":"4","location":"assets","locale":"","width":1280,"height":800},"screenshot-5.jpg":{"filename":"screenshot-5.jpg","revision":3772700,"resolution":"5","location":"assets","locale":"","width":1280,"height":800},"screenshot-6.jpg":{"filename":"screenshot-6.jpg","revision":3772700,"resolution":"6","location":"assets","locale":"","width":1280,"height":800},"screenshot-7.jpg":{"filename":"screenshot-7.jpg","revision":3772700,"resolution":"7","location":"assets","locale":"","width":1280,"height":800},"screenshot-8.jpg":{"filename":"screenshot-8.jpg","revision":3772700,"resolution":"8","location":"assets","locale":"","width":1280,"height":800},"screenshot-9.jpg":{"filename":"screenshot-9.jpg","revision":3772700,"resolution":"9","location":"assets","locale":"","width":1280,"height":800}},"screenshots":{"1":"The Backdrop filter setting sits right below the background color. Pick an effect, then set the amount.","2":"Blur, <code>blur(50px)<\/code>.","3":"Brightness, <code>brightness(200%)<\/code>.","4":"Contrast, <code>contrast(200%)<\/code>.","5":"Grayscale, <code>grayscale(100%)<\/code>.","6":"Hue, <code>hue-rotate(180deg)<\/code>. Halfway round the color wheel; a full 360deg turn looks the same as none.","7":"Invert, <code>invert(100%)<\/code>.","8":"Saturation, <code>saturate(300%)<\/code>.","9":"Sepia, <code>sepia(100%)<\/code>."}},"plugin_section":[],"plugin_tags":[271226,2767,148857,4889,196519],"plugin_category":[],"plugin_contributors":[208355],"plugin_business_model":[],"class_list":["post-394649","plugin","type-plugin","status-publish","hentry","plugin_tags-backdrop-filter","plugin_tags-background","plugin_tags-block-editor","plugin_tags-blur","plugin_tags-glassmorphism","plugin_contributors-jobthomas","plugin_committers-jobthomas"],"banners":{"banner":"https:\/\/ps.w.org\/glass-act\/assets\/banner-772x250.png?rev=3772700","banner_2x":"https:\/\/ps.w.org\/glass-act\/assets\/banner-1544x500.png?rev=3772700","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/glass-act\/assets\/icon-128x128.png?rev=3772700","icon_2x":"https:\/\/ps.w.org\/glass-act\/assets\/icon-256x256.png?rev=3772700","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-1.jpg?rev=3772797","caption":"The Backdrop filter setting sits right below the background color. Pick an effect, then set the amount."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-2.jpg?rev=3772700","caption":"Blur, <code>blur(50px)<\/code>."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-3.jpg?rev=3772700","caption":"Brightness, <code>brightness(200%)<\/code>."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-4.jpg?rev=3772700","caption":"Contrast, <code>contrast(200%)<\/code>."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-5.jpg?rev=3772700","caption":"Grayscale, <code>grayscale(100%)<\/code>."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-6.jpg?rev=3772700","caption":"Hue, <code>hue-rotate(180deg)<\/code>. Halfway round the color wheel; a full 360deg turn looks the same as none."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-7.jpg?rev=3772700","caption":"Invert, <code>invert(100%)<\/code>."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-8.jpg?rev=3772700","caption":"Saturation, <code>saturate(300%)<\/code>."},{"src":"https:\/\/ps.w.org\/glass-act\/assets\/screenshot-9.jpg?rev=3772700","caption":"Sepia, <code>sepia(100%)<\/code>."}],"raw_content":"<!--section=description-->\n<p>Select a block that sits on top of something, such as a cover image, a photo or scrolling content. Pick a <strong>Backdrop filter<\/strong> just below its background color setting and set the amount. Whatever is behind the block gets filtered, giving frosted glass, dimmed, black-and-white or tinted looks.<\/p>\n\n<p>The block doesn't need a background color of its own. Leave it empty to see the filter on its own, or add a semi-transparent color to tint it.<\/p>\n\n<p>Filters: Blur, Brightness, Contrast, Grayscale, Hue, Invert, Saturation and Sepia.<\/p>\n\n<ul>\n<li>Works on every block with a background color setting, such as Group, Columns, Buttons, Quote and Search.<\/li>\n<li>Previews live in the editor.<\/li>\n<li>Adds the style when the page renders and saves nothing extra into your post content. If you deactivate the plugin, your blocks stay valid and simply lose the filter.<\/li>\n<li>No settings page, no front-end scripts, no data stored.<\/li>\n<\/ul>\n\n<p>Blocks that already support backdrop filters natively are left alone. Theme presets referenced as <code>var:preset|backdrop-filter|{slug}<\/code> are rendered too.<\/p>\n\n<p>Source code and issues: <a href=\"https:\/\/github.com\/jobthomas\/glass-act\">github.com\/jobthomas\/glass-act<\/a>. The editor script in <code>build\/<\/code> is minified; its unminified source is in <code>src\/<\/code> in that repository, built with <code>@wordpress\/scripts<\/code> (<code>npm install &amp;&amp; npm run build<\/code>).<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Install from Plugins \u2192 Add New, or upload the plugin folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate it.<\/li>\n<li>Select a block that sits on top of an image or other content, then choose a <strong>Backdrop filter<\/strong> and amount just below its background color setting.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"i%20picked%20a%20filter%20but%20nothing%20changes\"><h3>I picked a filter but nothing changes<\/h3><\/dt>\n<dd><p>A backdrop filter changes what is visible behind the block, so something has to sit behind it, such as a cover image or a photo. A fully opaque background color also hides the effect: leave the background empty or make it semi-transparent.<\/p><\/dd>\n<dt id=\"does%20it%20work%20in%20every%20browser%3F\"><h3>Does it work in every browser?<\/h3><\/dt>\n<dd><p>It uses the CSS <code>backdrop-filter<\/code> property, which current versions of Chrome, Edge, Firefox and Safari support. Browsers without support show the block without the filter.<\/p><\/dd>\n<dt id=\"can%20filters%20be%20heavy%20on%20performance%3F\"><h3>Can filters be heavy on performance?<\/h3><\/dt>\n<dd><p>Large blur values on big areas can cost rendering time on low-powered devices. Blur values up to about 20px are usually plenty.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>First release.<\/li>\n<\/ul>","raw_excerpt":"Blur, tint and recolor whatever sits behind a block, right next to its background color setting.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/394649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=394649"}],"author":[{"embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/jobthomas"}],"wp:attachment":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=394649"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=394649"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=394649"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=394649"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=394649"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=394649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}