BlurGuard isn't just "blur" — it ships five distinct visual styles, each designed for a different scenario. The style button on the toolbar cycles through them, or you can set a default in Settings. Here's when to use each one.
1. Blur (Gaussian)
The default mode. Applies a CSS filter: blur() to the target element. The intensity is configurable — anywhere from 0 to 25 pixels via the slider in Settings or the toolbar's +/− buttons.
Best for: General-purpose hiding. Works well on text, form fields, table cells, and images. The content shape is still vaguely visible, which can be useful when you want viewers to know something is there without revealing what.
Tip
Lower intensity (2–5 px) is enough to make text unreadable while keeping the layout shape. Higher values (12–25 px) are better for complete obfuscation.
2. Block
Replaces the element's visual with a solid dark overlay (background: #1a1a1a) and makes text transparent. The element's dimensions are preserved, but its content is completely invisible — no blur artifacts, no peek-through.
Best for: Situations where even a blur silhouette gives too much away. Use it for salary figures, internal project names, or anything that viewers shouldn't even guess at.
3. Redact
Applies a yellow highlight bar (background: #fef3c7) with a dashed border — the classic "redacted document" look. When you first apply redact to text, BlurGuard asks what replacement text you want to show instead (e.g., "[REDACTED]", "[CONFIDENTIAL]", or custom text).
Best for: Compliance videos, audit walkthroughs, and any context where you want to explicitly signal that information has been hidden. The replacement text communicates intent: "this was here, but it's confidential."
How it works
The redact style uses a themed modal dialog (not a browser prompt()). Enter your replacement text, press Enter to confirm, or Escape to cancel. The replacement text is preserved across page reloads.
4. Transparent
Sets color: transparent on text elements. The text becomes completely invisible, but the space it occupies is preserved. Unlike block mode, there's no visible overlay — just empty space where text used to be.
Best for: Clean presentations where you want to hide values without drawing attention. The viewer sees blank space and may not even realize something was removed. Ideal for financial dashboards and reports.
5. Color
Overrides text color or background color to a custom hex color of your choice. A floating color palette appears at your cursor when color mode is active — pick a color from the native picker, type a hex value, and choose whether to apply it to text or background.
Best for: Matching your brand guidelines or presentation theme. For example, set the background to white to "white out" text on a dark page, or match text to the page background for invisible-but-present data.
How to switch styles
On the floating toolbar, the style button cycles through all five modes in order:
Blur → Block → Redact → Transparent → Color → Blur
Each click advances one step. The active mode is visually indicated on the toolbar. You can also set a default style in Settings → it applies to all new manual blurs until you change it again.
Per-blur vs. global style
The style you select on the toolbar applies to the next blur you create. Existing blurs keep their original style. This means you can mix styles on the same page — blur some elements, block others, redact sensitive lines — all coexisting.
Each blur remembers its own style. Changing the toolbar selection only affects new blurs, not existing ones. This lets you combine different styles on a single page for maximum flexibility.
Intensity control
The intensity slider in Settings (0–25 px) controls the global blur strength. It affects the Blur style (Gaussian filter radius) and is visible in real-time as you drag. At maximum intensity, blur becomes nearly indistinguishable from block mode.
For the other styles (block, redact, transparent, color), intensity doesn't apply — they have their own fixed visual treatment.
