How to set the gradient

user_15051230 0
Viewed 105

I have the following code below.

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 520px;
}

.col1 {
  margin: 75px;
}

.grad {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7))
}
<div class="row vh-100 mt-5 d-flex justify-content-center">
  <div class="col-6 imgcol1 col1 text-white">
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
    <div class="row grad">

    </div>
  </div>
</div>

I need to create a linear gradient as shown in the figure below.

I thought about adding a row on the column and putting the gradient in this row, it just doesn't work.

Can anyone kindly tell me how to do it?

bootstrap-5 linear-gradients bootstrap-4 css
3 Answers

Edited: Actually, if we look closely, the gradient is an overlay, rather than a background, meaning it's on top of the image rather than behind it.

HTML

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 520px;
  /*  filter: drop-shadow(-30px -10px 4px #4444dd); */
}

.col1 {
  margin: 75px;
}

.grad {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7))
}

.myGrad {
  z-index: 999;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(102, 126, 234, 0.5), rgba(245, 245, 245, 0.0), rgba(245, 245, 245, 0.0));
  transform: translate(-11%, -95%);
}
<div class="row vh-100 mt-5 d-flex justify-content-center">
  <div class="col-6 imgcol1 col1 text-white">
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
    <div class="row myGrad">

    </div>
  </div>
</div>

Here's a code pen that works. You can modify the values in the class ".myGrad" to get the box and gradient exactly like you want it.

https://codepen.io/MarwanAK10/pen/JjOVeGM

user_181231560

I put some comments in the CSS but here I altered the layout slightly and then used a pattern of two columns with the first holding the text and image and the second the one that contains the gradient.

One issue with the transform on the gradient here is that it extends outside of its container - try un-commenting the borders I put in just for a visual to see what is where to see what I mean.

NOTE: This example also includes bootstrap since you had that and it sets the text color to white.

.outer-container {
  /* border: solid 1px lime; */
}

.outer-row {
  /* border: solid 1px blue;*/
}

.image-column {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 100%;
}

.column-text {
  /*  border: solid 1px yellow; */
}

.gradient-column {
  /* force layout - this or &nbsp; in the html */
  border 1px solid transparent;
  background: linear-gradient(to right, rgba(127, 156, 179, 0.9), rgba(245, 245, 245, 0.0));
  /* move this a bit left and up */
  transform: translate(-8%, -115%);
  height: 190px;
  /* force this behind */
  z-index: -999;
  /* border: 1px solid #444488; */
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<div class="container outer-container">
  <div class="row outer-row">
    <div class=" col-12 mt-5 d-flex ">
      <div class="col col-12 image-column column-text text-white">
        <p>California</p>
        <h2>Sacramento</h2>
        <p>Esplora <i class="fa fa-solid fa-arrow-right"></i></p>
      </div>
    </div>
    <div class="col col-12 gradient-column"></div>
  </div>
</div>

user_1259810

I code-reviewed like that and update.

.container {
  position: relative;
}

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: 200px;
}
.imgcol1 p{
  margin:0;
}

.imgcol1:before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  z-index: -1;
  top: -20px;
  left: -20px;
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7));
}
<div class="row vh-100 mt-5 d-flex justify-content-center container">
  <div class="col-6 imgcol1 col1 text-white">
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
  </div>
</div>

user_92198940
Related