-4

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

2

1 Answer 1

0

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/

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.