.background { --tl: #b5fcc4; --tr: #5bfb40; --bl: #c3d42b; --br: #6762d9; width: 100%; height: 100%; border: 1px solid white; position: relative; background: linear-gradient(90deg, var(--tl), var(--tr)); } .background:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; mask-image: linear-gradient(to bottom, transparent, black); background: linear-gradient(90deg, var(--bl), var(--br)); }