Kevin Powell - Community•2y ago

Linear Gradients

Hi all, I'm trying to add two linear-gradients on a div - one starting from the right and one starting from the left-most corner. When I'm separating both the gradients only one of them persists. Can someone tell me what am I doing wrong?

background: linear-gradient(-90deg, #FF6D00, #FF6D00 20px, #FD4602 20px), linear-gradient(139deg, #FF6D00, #FF6D00 98px,#FD4602 98px);

background: linear-gradient(-90deg, #FF6D00, #FF6D00 20px, #FD4602 20px), linear-gradient(139deg, #FF6D00, #FF6D00 98px,#FD4602 98px);

I want the white part to be the 2nd gradient that I've mentioned. Thanks

5 Replies

Wolle•2y ago

Iirc multiple backgrounds get layered, so the second would overwrite the first. Try adding a transparent part to the second, where you wnat the first to be visible.

SatyaOP•2y ago

Can you give me an example pls?

Rägnar O'ock•2y ago

Simply use color stops with alpha information something like rgba(255, 0, 255, 128) or #FF00FF88

glutonium•2y ago

i thought alpha values are from 0 to 1 didn't know you can put values like 128

Rägnar O'ock•2y ago

I'm a bit rusty on rgba, it might be that...

Gaming

Programming

Linear Gradients