---
title: "BlurToggleImage — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Cem Atahan · Interactive. Reveal your images with a smooth blur"
canonical: "https://framer.elliotli.dev/component/blurtoggleimage"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/BlurToggleImage

# BlurToggleImage

Reveal your images with a smooth blur

[View on Framer](https://framer.com/marketplace/components/blurtoggleimage/?via=elliot-li)

![BlurToggleImage preview image 1](https://framer.elliotli.dev/og/component/blurtoggleimage/5f98159b12bbb5f4/1600x1200.jpg)

## Summary

Reveal your images with a smooth blur

## Description

**Blur Toggle Image** is an advanced and fully customizable Framer component that lets you beautifully reveal or hide any image using elegant blur transitions and interactive controls.Perfect for product reveals, premium content teasers, or portfolio showcases — it combines smooth motion, layered overlays, and animated icon feedback to create a polished, professional experience.

🚀 **Features**

-   🖼️ **Dual Source Support** — Use either a Framer image upload or a direct image URL
    
-   🌫️ **Dynamic Blur Effect** — Control blur amount and toggle visibility with one click
    
-   🎨 **Stylish Overlays** — Add gradient and color overlays for extra visual depth
    
-   🕶️ **Icon Customization** — Adjust color, size, hover glow, shake, and pulse animations
    
-   🕒 **Auto Restore Timer** — Automatically re-blur after a set delay
    
-   ⚡ **Smooth Transitions** — Customizable transition speed for perfect motion timing
    
-   🧊 **Rounded Corners** — Add a soft border radius for a clean design finish
    
-   🪄 **Motion-Powered Interactions** — Built with Framer Motion for fluid UI dynamics
    

💡 **Use Cases**

-   Before / After image comparisons
    
-   Hidden content reveals
    
-   Password-protected content previews
    
-   Creative portfolio thumbnails
    
-   Premium or teaser image blocks
    

🔧 **Properties**

**Image / Image URL:** Use local upload or external image source

**Start Blurred:** Choose whether the image starts blurred

**Blur Amount:** Adjust blur intensity

**Border Radius:** Round the image edges

**Overlay Colors:** Add color + gradient overlays

**Icon Settings:** Customize color, size, hover glow, shake & pulse

**Transition Speed:** Control transition timing

**Auto Restore Time:**Automatically blur again after N seconds

🧩 **Why Designers Love It**

This component adds motion and emotion to static images — no code, just creative control.It’s the perfect mix of **UX polish and storytelling**, helping users focus on what matters most: the reveal.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10111

## Details

- **Author**: Cem Atahan
- **Price**: $5.00
- **Published**: 2025-10-24
- **Updated**: 2026-01-16
- **Added**: 2025-10-18
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step