Quick Trick: Using border-image to Apply and Overlay Gradient.

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.

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

Leave a Reply

Your email address will not be published. Required fields are marked *