Image Masked Text
Creates text with an image mask effect, allowing customizable fonts, image fitting options (cover/contain/percent), and fallback text color for striking typography.
Make it with Workshop
Build your own component with AI
About this Component
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.
