Search code examples
csslinear-gradients

Both horizontal and vertical gradient on background color

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.

Solution

  • 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>