🔡CSS Text Image Mask
NATURE
Note: When using Google Fonts, ensure you import them in your website's CSS or HTML head.
The 'Image Inside Text' effect (technically known as `background-clip: text`) is a popular web design technique that makes headlines pop. This utility lets you generate this effect instantly. Type your text, choose from a variety of fonts (including popular Google Fonts like Anton and Montserrat), and upload a background photo. The tool clips the photo to the shape of your letters. You can copy the CSS to use on your website, or download the result as a transparent PNG image.
Frequently Asked Questions
How do I use the Google Fonts in the CSS output?
The generated CSS includes the `font-family` property. However, for the font to work on your live website, you must also include the Google Fonts link in your HTML `<head>` or use an `@import` in your CSS file.
Why is the text invisible in the CSS output?
The CSS uses `color: transparent`. This makes the actual text glyphs invisible so that the background image (which is clipped to the shape of the text) can show through.
