Html Question posted in
Some basic documentation can be found here.

Html – How do I apply an orange blur effect to a div that is encapsulating my image? with CSS

How do I apply an orange blur effect to a div that is encapsulating my image? I don’t want to apply anything to the image, just to its background div

<div class="image-container">
   <img class="image" src="/assets/images/person.png" />
</div>

I’m expecting something similar to this, a slight orange effect all around

enter image description here

Tags:

2

Answers


  1. 0

    You can use a linear-gradient for the background of the container of the image. You’ll need to make sure that the image only shows the subject, & has a transparent background, otherwise the gradient won’t show because it’ll be layered under the image.

    Here’s an example I created: Image & gradient background

    This is the gradient that I used: background: radial-gradient(circle, rgba(255,165,0,1) 0%, rgba(255,255,255,1) 100%)

    There are many sites that generate gradients for you. I used this one: cssgradient.io

    Login or Signup to reply.
  2. 0

    I hope to understand properly.
    To do this, we use gradient that have 4 types:

    .image-container {
  background: rgb(252, 168, 75);
  background: linear-gradient(
    90deg,
    rgba(252, 168, 75, 1) 10%,
    rgba(255, 231, 208, 1) 100%
  );
}

    In this code I used linear gradient.
    If you have a little trouble making it, use the gradient Online tools to start and play with them a little.
    I hope you have answered your question and got it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search