0

I am trying to create a background gradient for a div that follows this design: gradient 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?

L777
  • 7,719
  • 3
  • 38
  • 63
rocko1515
  • 3
  • 4
  • 2
    Does this answer your question? [How to add multiple css gradient as a multiple background?](https://stackoverflow.com/questions/8253452/how-to-add-multiple-css-gradient-as-a-multiple-background) and [How to apply multiple css radial gradients to a single element](https://stackoverflow.com/questions/10677429/how-to-apply-multiple-css-radial-gradients-to-a-single-element) – evolutionxbox Mar 02 '22 at 17:27
  • also this one https://stackoverflow.com/questions/60209914/is-this-possible-to-create-2-axis-4-color-gradient-in-css-bilinear-gradient/ – G-Cyrillus Mar 02 '22 at 17:34

1 Answers1

1

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>
alechristopher
  • 144
  • 6