How to create a diagonal gradient background on CSS?


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


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

one good website to manipulate gradient and have exaclty the expected one is

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

Leave a Reply

(*) Required, Your email will not be published