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.
