How to mask multiple boxes over one gradient?
I've designed this in Figma, placed one gradient behind multiple boxes, couldn't find a right way to implement this in CSS, please help me.
5 Replies
You can fake it with layered gradients: https://codepen.io/jochemm/pen/raBVvmg?editors=0100
you could also make an appropriate SVG and use that as a layered background
does any of these methods allow me to use these boxes as buttons or cards?
no, for that you need separate elements for each box
You could set a fixed gradient but the cards will scroll and change their bg colours depending on where they are on the viewport ; ie the gradient stays the same.
I'm on mobile and this demo is probably not looking nice on a desktop screen , as well as not being what you asked for, but it is an easy option if you like the effect.
https://codepen.io/Miss-Fox/pen/NPKqMZe
https://codepen.io/Miss-Fox/pen/NPKqMZe