How can I add a blurred gradient behind an image? [duplicate]

Question

What would the html and css look like to create a blurred gradient underneath an image? I understand how to create the gradient, but am not sure how to get it underneath images.

Something like this:

The gradient can be found here:

background: linear-gradient(90deg, rgba(98,52,255,1) #6234FF%, rgba(255,0,128,1) 100%);

You can use gradient background on a box shadow like in the answer below — rjumatov
– rjumatov, Commented Jul 20, 2022 at 10:11

rjumatov · Accepted Answer · 2022-07-20 07:34:52Z

0

You can make use of a custom-gradient class which is styled like that:

.image-wrapper {
  background-color: white;
  height: 100%;
  width: 100%;
}

.custom-gradient {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: inset 0 0 12px 12px white, inset 0 0 3px 2px white;
  background: linear-gradient(to right, rgba(98, 52, 255, 1), #6234FF, rgba(255, 0, 128, 1))
}

<div class="custom-gradient">
  <div class="image-wrapper">
    <h1>My image</h1>
  </div>
</div>

answered Jul 20, 2022 at 7:34

rjumatov

3,5102 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I add a blurred gradient behind an image? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related