Image Blur

Blurs images, background images and videos — never SVGs, icons or whole pages. Works in iframes like the Shopify theme editor.

Image Blur blurs the photos and videos on any website and leaves everything else sharp. Text, buttons, menus, icons, logos and SVG graphics stay readable, so you can keep using the page normally while its pictures are hidden. It is built for people who need to browse, build or review websites without seeing every image clearly: store owners and developers working in the Shopify theme editor, designers checking a layout, people who want to avoid triggering or graphic pictures, people working in public places or on a shared screen, and anyone who simply wants a calmer, less visual web. One click or one keyboard shortcut turns it on or off. Changes apply right away, with no page reload. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT GETS BLURRED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur only blurs real pictures: • Images (<img>), including responsive images that use <picture> and srcset • Videos (<video>), including the poster image sImage Blur blurs the photos and videos on any website and leaves everything else sharp. Text, buttons, menus, icons, logos and SVG graphics stay readable, so you can keep using the page normally while its pictures are hidden. It is built for people who need to browse, build or review websites without seeing every image clearly: store owners and developers working in the Shopify theme editor, designers checking a layout, people who want to avoid triggering or graphic pictures, people working in public places or on a shared screen, and anyone who simply wants a calmer, less visual web. One click or one keyboard shortcut turns it on or off. Changes apply right away, with no page reload. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT GETS BLURRED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur only blurs real pictures: • Images (<img>), including responsive images that use <picture> and srcset • Videos (<video>), including the poster image shown before a video plays • Photo backgrounds: elements that use a raster CSS background-image, such as hero banners, slideshow slides, product tiles and section backgrounds Images that load later are blurred too. Lazy-loaded images, infinite scroll, carousels, tabs, pop-ups and content added by JavaScript are all detected as they appear. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT NEVER GETS BLURRED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Many blur tools blur the whole page or large parts of it, so you can't read anything. Image Blur is deliberately narrow. It never blurs: • SVG graphics: inline <svg> elements, .svg image files and SVG data backgrounds. These are almost always icons, logos and interface graphics. • Icon-sized images: anything smaller than a size you choose (32 px by default) is treated as an icon or logo and stays sharp. • Text, buttons, links, forms and menus • The page itself: the <html> and <body> elements are never blurred • Embedded frames, canvases, plugins and embeds: iframes, frames, <canvas>, <object> and <embed> elements are never blurred as a block Text on top of a background photo stays sharp. On a hero banner with a headline and a "Shop now" button over a photo, only the photo is blurred. The headline and button stay crisp and clickable. This works because the blur is drawn as a separate layer behind the element's content, instead of blurring the whole element. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS IN THE SHOPIFY THEME EDITOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur was designed to work inside the Shopify theme editor, where most blur extensions fail. The theme editor shows your storefront inside an iframe. A typical extension either blurs that whole iframe, which makes the preview unreadable, or only runs in the top page, so the preview is never blurred. Image Blur handles this: • It runs inside every frame on the page, including the theme editor preview, about:blank frames and frames created by scripts. • It never blurs the iframe element itself, so the editor sidebar, toolbar and the preview's text stay sharp. • When you change a setting in the editor and Shopify re-renders a section, the new images are found and blurred again within a moment. • When the editor reloads the whole preview, Image Blur notices and repairs itself automatically. • It also looks inside web components and shadow DOM, which the Shopify admin uses for many interface elements. • Turning blur off for a site applies to the site in your address bar. If you turn it off on admin.shopify.com, it's also off inside the storefront preview shown there. You can edit sections, text, colors and layout while product photos, banners and videos stay blurred. This isn't limited to Shopify. The same approach works on any website that shows content in iframes, uses web components or loads content on the fly, including page builders, CMS editors, web apps and online stores. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ REVEAL ON HOVER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Sometimes you need to see a single image. With "Reveal on hover" turned on (the default), moving your pointer over a blurred image or video shows it clearly. Move the pointer away and it blurs again. Reveal on hover also works when an invisible link or overlay covers the image. This is common on product cards, where the whole card is a clickable link sitting on top of the picture. Image Blur checks what is under the pointer rather than relying only on the browser's hover state, so the image underneath still appears. If you want images to stay blurred no matter where the pointer is, switch "Reveal on hover" off in the popup. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEYBOARD SHORTCUTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Two shortcuts let you control Image Blur without opening anything: • Alt+L: turn blur on or off everywhere. Press once to turn it off, press again to turn it back on. • Alt+K: turn blur on or off for the current site only. Use it to keep a trusted site sharp while blur stays on everywhere else. You can change both shortcuts at chrome://extensions/shortcuts. The popup has a "Customize" button that takes you there, and it always shows the keys that are currently assigned. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIMPLE SETTINGS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Click the Image Blur icon in the toolbar to open the popup: • Main switch: turns blur on or off everywhere (same as Alt+L). The status line shows whether blur is active. • This site: shows the current site with its icon and a switch to turn blur on or off just for that site (same as Alt+K). • Blur strength: choose Light, Medium or Strong with one click, or set any value from 2 px to 40 px with the slider. A small live preview shows how strong the blur will look. The default is 12 px. • Reveal on hover: shows an image while your pointer is over it. On by default. • Skip icons & logos: images smaller than this size are left sharp. You can set it from 0 px (blur every image, however small) up to 200 px (only blur large photos). The default is 32 px. SVGs are always skipped, whatever this setting is. Every change applies to all open tabs straight away. You never need to reload a page. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SEE THE STATUS AT A GLANCE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ The toolbar icon shows whether blur is active in the current tab: • Blue icon: blur is active on this page. • Grey icon: blur is paused, either everywhere or just for this site. Hover over the icon to see "Image Blur — on" or "Image Blur — off". The icon updates per tab as you switch tabs and visit new sites, so you always know what you'll see before you look. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS RIGHT AFTER INSTALL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Usually a newly installed extension doesn't run in tabs that were already open until you refresh them. Image Blur adds itself to your open tabs as soon as it's installed or updated, so blur starts working right away without a reload. (Chrome doesn't let any extension run on some special pages, such as the Chrome Web Store, chrome:// settings pages and the new tab page. Image Blur can't blur those pages.) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHO IT'S FOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ • Shopify merchants and theme developers who want to work on layout, copy and settings in the theme editor without the product images in view. • Web designers and developers who want to judge a page's structure, typography and spacing without the photos pulling attention. • QA testers and reviewers who check page content and layout at scale. • People who want to avoid unexpected graphic, disturbing, triggering or unwanted images while reading news, social media or forums. • People working in public, such as on a train, in a café or in an open-plan office, who don't want images on their screen to be visible to others. • Presenters and streamers sharing their screen who want to avoid showing images they haven't checked first. • Anyone who finds image-heavy pages overwhelming or distracting and wants a calmer way to read. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW TO USE IT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Install Image Blur. Images and videos in your open tabs are blurred straight away. 2. Pin the icon to your toolbar so you can see the status and reach the settings easily (click the puzzle-piece icon, then the pin next to Image Blur). 3. Hover over an image to see it, or press Alt+L to turn blur off everywhere. 4. On a site you trust, press Alt+K or use the "This site" switch to keep that site sharp. 5. Open the popup to adjust blur strength and choose how small an image must be to count as an icon. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIVACY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur does all its work locally in your browser. • It doesn't collect, record, sell or share any personal data or browsing history. • It doesn't send the pages you visit, the images on them or your settings to any server. The extension doesn't make network requests of its own. • It contains no analytics, tracking, advertising or third-party code. • Images aren't downloaded, copied, uploaded or modified. The blur is a visual effect applied with CSS, and the original image on the page is untouched. Your settings (on/off, blur strength, reveal on hover, minimum image size and the list of sites where you've turned blur off) are saved with Chrome's built-in extension storage. If you're signed in to Chrome with sync on, Chrome syncs these settings between your own devices. Nobody else has access to them. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHY IT NEEDS THESE PERMISSIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur asks only for what it needs to do its job: • Read and change data on all websites: required to find images and videos on the pages you visit and apply the blur, including inside embedded frames such as the Shopify theme editor preview. Image Blur only marks images so the blur style applies to them. It doesn't read your form entries, passwords or messages, and it doesn't send anything anywhere. • Storage: saves your settings so they're remembered between sessions and across your devices. • Scripting: lets Image Blur start in tabs that were already open when you installed or updated it, so you don't need to reload them. • Active tab: lets the popup show the site you're on so you can turn blur on or off for that site. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIGHTWEIGHT AND FAST ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur is small and has no external libraries. It watches for page changes efficiently, groups updates together instead of re-checking the whole page on every change, and uses the browser's own CSS blur, which runs on the graphics hardware. Pages keep scrolling smoothly and the blur fades in and out quickly when you hover. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FREQUENTLY ASKED QUESTIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q: Why is a logo or icon not blurred? A: That's on purpose. SVG graphics are never blurred, and images smaller than the "Skip icons & logos" size are left sharp. To blur smaller images, lower that value in the popup. Set it to 0 px to blur every image. Q: Why is a small product thumbnail not blurred? A: It's probably smaller than the minimum size. Lower "Skip icons & logos" in the popup. Q: Some text on a banner looks blurred. Why? A: Text drawn as live text on top of a background photo stays sharp. If the words are part of the image file itself, they're blurred with the rest of the image, because Image Blur can't separate them. Q: Does it blur images inside canvas elements, WebGL or games? A: No. <canvas> elements are skipped so web apps, maps, charts and editors stay usable. Q: Does it blur videos embedded from other sites, such as YouTube? A: Image Blur runs inside embedded frames where Chrome allows it, so a video player inside an embedded frame is usually blurred like any other video. The frame itself is never blurred as a block. Q: The shortcut doesn't work. What can I do? A: Another extension may already use Alt+L or Alt+K. Open the popup, click "Customize" and assign different keys at chrome://extensions/shortcuts. Q: Do I need to reload pages after changing a setting? A: No. Every change, including blur strength, minimum size, reveal on hover and per-site switches, applies to all open tabs immediately. Q: Does it work on every page? A: It works on normal websites (http and https), including their embedded frames. Chrome doesn't allow extensions on some protected pages, such as the Chrome Web Store and chrome:// pages. Q: Does it change or download images? A: No. The blur is purely visual. Nothing is downloaded, saved, uploaded or changed. Turn blur off and the page looks exactly as it did before. Image Blur: blur the pictures, keep the page. hown before a video plays • Photo backgrounds: elements that use a raster CSS background-image, such as hero banners, slideshow slides, product tiles and section backgrounds Images that load later are blurred too. Lazy-loaded images, infinite scroll, carousels, tabs, pop-ups and content added by JavaScript are all detected as they appear. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT NEVER GETS BLURRED ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Many blur tools blur the whole page or large parts of it, so you can't read anything. Image Blur is deliberately narrow. It never blurs: • SVG graphics: inline <svg> elements, .svg image files and SVG data backgrounds. These are almost always icons, logos and interface graphics. • Icon-sized images: anything smaller than a size you choose (32 px by default) is treated as an icon or logo and stays sharp. • Text, buttons, links, forms and menus • The page itself: the <html> and <body> elements are never blurred • Embedded frames, canvases, plugins and embeds: iframes, frames, <canvas>, <object> and <embed> elements are never blurred as a block Text on top of a background photo stays sharp. On a hero banner with a headline and a "Shop now" button over a photo, only the photo is blurred. The headline and button stay crisp and clickable. This works because the blur is drawn as a separate layer behind the element's content, instead of blurring the whole element. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS IN THE SHOPIFY THEME EDITOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Image Blur was designed to work inside the Shopify theme editor, where most blur extensions fail. The theme editor shows your storefront inside an iframe. A typical extension either blurs that whole iframe, which makes the preview unreadable, or only runs in the top page, so the preview is never blurred. Image Blur handles this: • It runs inside every frame on the page, including the theme editor preview, about:blank frames and frames created by scripts. • It never blurs the iframe element itself, so the editor sidebar, toolbar and the preview's text stay sharp. • When you change a setting in the editor and Shopify re-renders a section, the new images are found and blurred again within a moment. • When the editor reloads the whole preview, Image Blur notices and repairs itself automatically. • It also looks inside web components and shadow DOM, which the Sho