CODEWITHSUNDEEP
csslinear-gradients
Mormoran
Mormoran

Reputation: 791

Adding horizontal and vertical fading gradients on an element

Is there a way to have a background gradient from left to right, dark red to light red (just as an example), but also at the same time a fade from top 100% opacity to bottom 0% opacity?

It's not the same as a diagonal gradient, it's a gradient with color on X axis and transparency on Y axis.

I've been trying to see if I can manage, but I can't figure out a way to do it.

[EDIT]

This is a picture of what I have. It's just one of bootstrap's templates.

As you can see, I have a gradient from left (darker red) to right (lighter red).

I would also like this entire element to fade to white at the bottom, so that the cutoff for this section is not sudden, but gradual.

Example 1

As you can see here, going with the diagonal solution, the edge on the left side is still very sharp. What I want is for the entire bottom side to fade to white, that is, a transparency gradient on the Y axis, while I still have the left to right color gradient on the X axis.

Example 2

Upvotes: 5

Views: 6528

Answers (2)

Paulie_D
Paulie_D

Reputation: 115096

Perhaps a radial gradient from one corner

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div {
  width: 80vw;
  height: 80vh;
  margin: 10vh auto;
  border: 1px solid black;
  background: radial-gradient(farthest-corner at left top, rgba(139, 0, 0, 1), rgba(255, 255, 255, 0));
}
<div></div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272965

You can use multiple gradient to simulate this:

body {
  height:100vh;
  margin:0;
  background:
   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),
   linear-gradient(to right,black,white);
}

Upvotes: 5

Related Questions