---
title: "Image Masked Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Joseph Alexander · Text. Create visually striking text"
canonical: "https://framer.elliotli.dev/component/image-masked-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Image Masked Text

# Image Masked Text

Create visually striking text

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

![Image Masked Text preview image 1](https://framer.elliotli.dev/og/component/image-masked-text/8dedc4933b468115/1600x1200.jpg)

## Summary

Create visually striking text

## Description

Creates visually striking text where an image appears inside the letter shapes using CSS masking techniques. The component clips background images to the text outline, making images visible only within the text characters.

**Key Features:**

**Text Masking:** Uses background-clip properties to create the mask effect, where the background image is only visible within the text shapes, creating dramatic visual typography.

**Flexible Image Fitting:** Offers three image fit options:

-   **Cover:** Image scales to cover the entire text area
    
-   **Contain:** Image scales to fit entirely within the text bounds
    
-   **Percent:** Custom scaling from 10% to 200% with center positioning
    

**Typography Controls:** Full font customization including size, weight, style, line height, letter spacing, and text alignment.

**Fallback Handling:** When no image is provided or fails to load, gracefully displays solid colored text using the specified text color, ensuring your design always works.

**Responsive Design:** Content automatically centers within its container and adapts to any layout dimensions, maintaining visual balance across different screen sizes.

Perfect for creating eye-catching headlines, hero text, or decorative typography where you want to fill text with textures, patterns, or photographic content while maintaining complete control over typography and layout. Ideal for landing pages, promotional materials, and artistic text treatments.

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

-   All · #799

## Details

- **Author**: Joseph Alexander
- **Published**: 2025-07-31
- **Updated**: 2026-02-20
- **Added**: 2025-07-31
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos