Add a gradient overlay using border-image
Do you want to add a gradient overlay above your background but you cannot edit the background property, add an extra element or use pseudo-element?
You can do it with border-image
!
Only one line of code and you have your overlay 🤩
.container {
border-image:
linear-gradient(#0003,#000) /* your gradient here */
50%/50%; /* no need to touch this, we always want 50% of slice
and 50% border-width */
}
See the Pen Gradient overlay using border-image by Temani Afif (@t_afif) on CodePen.