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.