Both horizontal and vertical gradient on background color-CodePudding

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

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.

CodePudding user response：

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>

CodePudding user response：

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 ></div>

CodePudding user response：

background:rgb(0,0,0); background-clip: content-box;