CODEWITHSUNDEEP
htmlcss
Chris Hansen
Chris Hansen

Reputation: 8633

how to add box shadow to image

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>

enter image description here

Upvotes: 3

Views: 6000

Answers (5)

Dheeraj Singh Nagdali
Dheeraj Singh Nagdali

Reputation: 1

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

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

Upvotes: 0

naveenkumar.s
naveenkumar.s

Reputation: 991

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

Upvotes: 0

Nathan Bierema
Nathan Bierema

Reputation: 1923

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>

Upvotes: 2

Amin Gharavi
Amin Gharavi

Reputation: 452

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 :)

Upvotes: 0

Sagar Kodte
Sagar Kodte

Reputation: 3815

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>

Upvotes: 0

Related Questions