---
title: "Focus Frame — Free Framer component · Best of Framer"
description: "Free Framer component · by Izzy · Cards. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/focus-frame"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Focus Frame

# Focus Frame

Blurred framing for your images

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

![Focus Frame preview image 1](https://framer.elliotli.dev/og/component/focus-frame/309b950c6750c483/1600x1067.jpg)

## Summary

Focus Frame solves this.

## Description

Achieving the popular "inset blur" or "frosted border" effect in web design usually requires complex absolute positioning and manual math to keep layers aligned. If you resize the frame, the effect breaks.

**Focus Frame** solves this.

This smart component uses a single image source to populate both the sharp foreground and the blurred background simultaneously. Using advanced negative-offset constraints, the background blur is automatically calculated to prevent white edge-bleeding, ensuring a clean, cinematic look at any aspect ratio.

Perfect for team bios, feature highlights, or gallery items where you need high contrast and visual depth.

**Features:**

-   **Single Source of Truth:** Upload your image once; the component handles the rest.
    
-   **Auto-Alignment:** Resize the component freely—the inner image never drifts from the background.
    
-   **Bleed Correction:** Built-in overflow compensation eliminates the common "white halo" caused by web-based Gaussian blurs.
    
-   **Fully Customizable:** Tweak the border thickness, overlay colour/tint, and corner radius directly from the properties panel.
    

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

-   All · #6879

## Details

- **Author**: Izzy
- **Published**: 2026-02-09
- **Updated**: 2026-10-28
- **Added**: 2026-01-17
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards