Combine 2 linear gradients using `background` css? [duplicate]

Question

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?

Does this answer your question? How to add multiple css gradient as a multiple background? and How to apply multiple css radial gradients to a single element — evolutionxbox
– evolutionxbox, Commented Mar 2, 2022 at 17:27

alechristopher · Accepted Answer · 2022-03-02 17:48:58Z

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>

answered Mar 2, 2022 at 17:48

alechristopher

1447 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Combine 2 linear gradients using `background` css? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related