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 (via Temani Afif). Plus it’s a juicy one-liner:
.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.