0
766
ViewsCombine 2 linear gradients using `background` css?
I am trying to create a background gradient for a div that follows this design:
The background has a horizontal gradient
linear-gradient( to right, #84d2ff, #8d5acd),
but also has a vertical gradient from white downward (not transparent).
Is is possible to combine these two gradients using CSS?
·
Juan Pablo Isaza
1 answers
Answer question0
Each of the gradients you apply are non-transparent, so one of them will always lay on top of the other. You'll need to apply a fade effect using alpha values.
The look here for more detail: How to combine two css3 gradients ?
.double-gradient {
display: grid;
place-items: center;
height: 200px;
width: 200px;
background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(251, 251, 251, 0.1) 100%), linear-gradient(90deg, #84d2ff, #8d5acd);
}<div class="double-gradient">
Double Gradient
</div>
·
Juan Pablo Isaza
Report
Answer question