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.

4 responses to “Quick Trick: Using border-image to Apply and Overlay Gradient.”

  1. Avatar Carlos says:

    And why not use a more intuitive solution, like the double background-image?

    • Avatar Chris Coyier says:

      Multiple backgrounds totally works. The border-image technique though means you can use it as a utility class and not worry about what the background-image situation is on any element. You just use it and the fade happens overtop any backgrounds.

  2. Temani Afif Temani Afif says:

    This trick is getting popular so here is the article where I am explaining it with more examples:

Leave a Reply

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