Discover how to transform ordinary photos into cinematic optical masterpieces using the free, 100% client-side Universal Image Blur & Bokeh Focus Studio on RiazHub.com. Learn the science behind 2D Gaussian convolution blurs, master miniature tilt-shift photography tricks, create creamy portrait bokeh depth-of-field, and selectively redact sensitive credentials, faces, or license plates with custom brush masks. All calculations and exports take place entirely inside your browser using HTML5 Canvas—guaranteeing lightning-fast rendering and total zero-server privacy without uploading a single byte to the cloud.

⚡ High-Speed HTML5 Canvas Studio

Universal Image Blur & Bokeh Focus Studio

Apply smooth Gaussian blur, radial tilt-shift, miniature depth-of-field, or selective brush blurring with instant before/after split preview.

🎯 Active Blur Mode

Radial Tilt-Shift • Circular

🌊 Blur Intensity

Radius: 25px • Gaussian

📐 Canvas Resolution

1200 × 800 px • 1.0 MP

🔒 Processing Engine

⚡ 100% Client-Side Private

✨ Quick Presets:

👤 Portrait Bokeh (Radial 25px) 🏙️ Miniature Tilt-Shift (Linear 45px) 🔒 Privacy Frost (Global 60px) 🖼️ Website Hero (Subtle 12px)

⚙️ Blur Configuration Reset

📁

Drag & Drop Image Here

Supports JPG, PNG, WEBP, AVIF, BMP, GIF

📂 Select File 📋 Paste (Ctrl+V) 🎨 Sample Photo

Select Blur Mode

🌐 Full Image 🎯 Radial Focus 📏 Linear Tilt-Shift 🖌️ Brush Mask

Blur Radius 25px

Focal Clear Zone Size 35%

Feathering / Soft Falloff 30%

Focal Shape

Circle Ellipse

Invert Blur (Blur Center / Keep Edges Sharp)

Focus Strip Width 25%

Tilt Rotation Angle 0°

Brush Size 50px

Brush Tool Mode

🖌️ Paint Blur 🧹 Eraser (Clear)

🗑️ Clear Painted Mask

💾 Output & Export Settings

Target Format WebP (Modern, High Compression) PNG (Lossless Quality) JPEG (Universal Compatibility)

Image Quality 92%

Custom Filename Suffix

⚡ Apply & Render Blur 🔄 Reset to Original Image

🎨 Interactive Stage & Live Canvas ↔️ Split-Screen Before/After 👥 Side-by-Side Dual View 💻 CSS Backdrop Code

Original Raw Blurred Result

↔

Original Unblurred Photo

Processed Blur / Bokeh

Copy CSS

/* Modern CSS Frosted Glass & Backdrop Filter */
.frosted-glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
}

/* Direct Image Element Filter */
.blurred-photo {
    filter: blur(25px);
    -webkit-filter: blur(25px);
    transform: scale(1.05); /* Avoid feathered border bleeding */
}

💡 Tip for Web Designers: backdrop-filter blurs whatever elements or backgrounds lie behind the container, creating an Apple-style frosted glass effect. Alternatively, applying filter: blur() directly onto an image blurs the bitmap itself in browser rendering.

🔍- 100% 🔍+ ↔️ Fit

Show Focal Guides

💾 Download Blurred Image ✨ Lossless PNG 📋 Copy to Clipboard

📚 Optical Optics, Gaussian Math & Privacy Guide

🌊 How 2D Gaussian & Box Convolution Blurs Work ▼

Digital image blur algorithms simulate optical lens defocus by convolving pixel matrices with a Gaussian distribution bell curve (Bell Curve: G(x,y) = (1 / 2πσ²) * e^(-(x²+y²)/2σ²)). The standard deviation σ (represented by our blur radius slider) calculates weighted color averages from neighboring pixels, softening high-frequency luminance edges and eliminating noise or sensitive privacy text.

🏙️ The Optics Behind Tilt-Shift Miniature Photography ▼

Tilt-shift photography physically tilts the lens plane relative to the camera sensor (Scheimpflug principle), creating a paper-thin slice of sharp focus bounded by progressive defocussed foregrounds and backgrounds. When applied to aerial cityscapes or busy landscapes, our brain interprets the narrow depth-of-field as macro-photography of tiny scale miniature toys.

⚡ CSS `filter: blur()` vs. Rendered Canvas Pixel Export ▼

CSS filter: blur(20px) merely instructs the client GPU to defocus the raster presentation on screen, meaning the underlying original high-res image remains intact and inspectable in the browser DOM. Our studio renders the convolution blur directly into the raw pixel bitmap (`ImageData` array) before encoding, ensuring privacy redactions are 100% irreversible when exported.

🛡️ Zero-Server Privacy & High-Speed Performance Guarantee ▼

Every calculation, convolution pass, alpha-mask compositing, and file compression takes place exclusively inside your device's web browser using native HTML5 Canvas 2D engine. No image data, sensitive IDs, photos, or files are ever transmitted to RiazHub.com or any external cloud server.

✅ Image copied to clipboard!