How to create a diagonal gradient background on CSS?

Issue

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

Solution

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/

Answered By – jeremy-denis

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0