I was watching Kevin Powell and Adam Argyle rapidfire through 23 CSS features. They are all cool tricks, but one stood out to me. Even as an extreme CSS connoisseur I hadn’t seen it before. It’s a juicy one-liner (credit Temani Afif):
.overlay {
border-image: fill 0 linear-gradient(#0003, #000);
}Code language: CSS (css)This fills the entire element with a gradient overlay on top of any background. Gradient overlays are particularly useful when you’re trying to darken some of the image in order to lay text over it.
Still waitin’ for an easier way to make those “eased” gradients that look ultra nice.
And why not use a more intuitive solution, like the double background-image?
https://codepen.io/carlosespada/pen/abrEjav
Multiple backgrounds totally works. The
border-imagetechnique though means you can use it as a utility class and not worry about what thebackground-imagesituation is on any element. You just use it and the fade happens overtop any backgrounds.Ah ok ok, in terms of utility class it’s indeed useful, thanks for the clarification 🙂
This trick is getting popular so here is the article where I am explaining it with more examples: https://www.smashingmagazine.com/2024/01/css-border-image-property/