With the CSS properties 'background', 'box-shadow', 'border-image' and 'filter' it is relatively easy to create backgrounds for text centered on images that are eye-catching.
In this short article, I'll show you five examples of this type of text background.
A Few Words about the Approach
For the different text backgrounds, I just use CSS Flexbox without
z-index and without the pseudo elements
You can view, edit, modify or download all the code on codepen.io.
The HTML Code
The basic HTML structure looks like this:
I get the background effect via styling with the CSS properties
The text backgrounds are colored with linear or radial gradients.
The CSS property
box-shadow makes the text background stand out from the background image.
The CSS filter
drop-shadow enhances the special effects.
In three examples, I also apply the CSS property
border-image to “attach” the text backgrounds to the image background.
Below I show you five examples of background effects that highlight key text messages.
You can view, edit, copy and customize the entire code for your needs on codepen.io.
And what about
Unfortunately, neither the Firefox browser nor Internet Explorer 11 support the CSS
backdrop-filter property (Status: June 2021); this only affects around four percent of all users worldwide, but they also want to be taken into account. Therefore, I do not use this feature here.
1. Example with 'background: radial gradient'
2. Example with an Additional Background Image
3. Example with a 'Screwed' Background
The screws are 'screwed' into the four corners as
4. Example with a 'Pinned' Background
The pins are 'pinned' into the four corners as
5. Colored Example with an Enamel Sign Effect
Screwed on like example no. 3 this pattern looks like an shield made from enamel fixed on a wall.
Get the whole code on codepen.io.
That's it for this time. Have fun developing and applying the examples!
The following generators help you to create awesome backgrounds for your key messages
Generators for box-shadow:
Generators for CSS filter:
Generators for CSS gradients:
And here comes a generator for glassmorphism (but with backdrop-filter)