How to create a diagonal gradient background on CSS?

Question

How to create a diagonal gradient background but still keep the box content in position?

The diagonal background more or less like this and the box content still in position as shown in the image

Thanks in advance

Answer 1

you can use linear-gradient value for background

• first parameter is the degree of the gradient
• then you have to place one color with percentage of space take in gradient color

to perform what you expect i can advice you 3 point

.middle-gradient div {
  padding: 50px;
  border: solid 1px;
  flex: 0 0 10%
}

.middle-gradient {
  background: blue;
  border: solid 1px;
  padding: 50px;
  display: flex;
  justify-content: center;
  gap: 5%;
  width 100%;

  background: linear-gradient(160deg, rgba(255,255,255,1) 28%, rgba(0,0,255,1) 28% 66%, rgba(255,255,255,1) 66%);
}

<div class="middle-gradient">
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

one good website to manipulate gradient and have exaclty the expected one is https://cssgradient.io/