Both horizontal and vertical gradient on background color

user_3765875 0
Viewed 178

I'm trying to add a black rectangle as a bakcground for the red div.

enter image description here

I managed to make the horizontal hard fade:

background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 60%, rgba(208,6,30,1) 60%);

It seems it's either horizontal or vertical. Can I do both?

I'd like to do this with CSS, not add a black image as background.

linear-gradients css
2 Answers

If you set the background-color to the red you can overlay it with a rectangle of the black which has, say, 60% width and 50% height and is positioned from the bottom.

div {
  --r: rgba(208, 6, 30, 1);
  --b: rgba(0, 0, 0, 1);
  display: inline-block;
  width: 50vmin;
  height: 30vmin;
  background-color: var(--r);
  background-image: linear-gradient(var(--b), var(--b));
  background-size: 60% 50%;
  background-position: left bottom;
  background-repeat: no-repeat;
}
<div></div>

user_108674540

Use conic-gradient:

.box {
  display: inline-block;
  width: 300px;
  height: 200px;
  background: conic-gradient(from -90deg at 70% 50%, rgb(208,6,30) 75%, black 0);
  /* adjust the "at 70% 50%" to control the position */
}
<div class="box"></div>

user_86203330
Related