how to add box shadow to image

Question

How can I add box shadow to an image like the one attached using css?

.create-option-thumb-img {
    box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14);
}

.create-option-thumb-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    z-index: -1;
}

I have the following code above and the following HTML:

<div class="create-option-thumb-img">
   <img src="" />
</div>

the code works fine. just play with the values to get the desired result. `box-shadow: 0px 1px 20px 10px rgba(0, 0, 0, 0.2);` — cdm, Apr 21 '16 at 06:19
Does this answer your question? [How to apply box-shadow on all four sides?](https://stackoverflow.com/questions/5608222/how-to-apply-box-shadow-on-all-four-sides) — kmoser, Oct 16 '20 at 03:31

Nathan Bierema · Answer 1 · 2016-04-21T06:37:50.173

You just need to change the box-shadow line to get the desired result:

box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);

The first and second numbers stand for the x- and y-offsets of the shadow which should be 0 because the shadow is directly under the image.

The third number is the blur distance which is how much the border is blurred.

The fourth number is the shadow size so the larger this number is, the larger the shadow will be.

The last property value is the color which right now is set to black (0, 0, 0) with an opacity of 0.05. The lower the opacity, the more it will blend in with the background. The higher the opacity, the less it will blend in with the background.

.create-option-thumb-img {
    margin: 50px;
    box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);
}

.create-option-thumb-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    z-index: -1;
}

<div class="create-option-thumb-img">
   <img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" />
</div>

score 0 · Answer 2 · answered Apr 21 '16 at 06:21

Just adjust box shadow style..whatever you want. Thanks.

.create-option-thumb-img  {
    width: 20%;
    height: auto;
    vertical-align: bottom;
    z-index: -1;
    box-shadow: 0px 9px 250px -15px #000;
}

<div class="create-option-thumb-img">
   <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png">
</div>

score 0 · Answer 3 · answered Apr 21 '16 at 06:21

you can add it to your img like this :

.create-option-thumb-img img {
  box-shadow: 0px 0px 40px 0px red;
}

You dont need the z-index and stuff like that. JSFiddle

you can always inspect the element and play with the CSS properties to get the right combination :)

score 0 · Answer 4 · answered Apr 21 '16 at 06:52

Try this css

.create-option-thumb-img img {
    -webkit-box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27);
    -moz-box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27);
     box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27);
 }

Just a suggestion:

There are some online Box shadow css Generator is available if you want you can use and select by your own

for online css generator link click me

score 0 · Answer 5 · answered Oct 16 '20 at 02:44

0

try rgba value in box-shadow and set rgba first value empty

img{box-shadow:0 0 1rem rgba(0,0,0,0.5)}

answered Oct 16 '20 at 02:44

Dheeraj Singh Nagdali

1
1

how to add box shadow to image

5 Answers5