how to set shadow for round image(css)

Question

I\'m new to shadow in css can we set shadows for round image(i mean to a circle image).

if it is possible, please give me a code for this in css. thanks in advan

Answer 1

shadows are independent of shapes in css, you can use the shadow property for circle after creating circle. You can use the following code for that, it should work fine

.circle{ 
   width:150px;height:150px;
   border: solid 1px #555;
   background-color: #eed;
   box-shadow: 10px -10px rgba(0,0,0,0.6);
   -moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
   -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
   -o-box-shadow: 10px -10px rgba(0,0,0,0.6);
   border-radius:100px;
} 

Answer 2

Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.

Answer 3

box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.

Apply this CSS to your tag or its class, and you are done.

Answer 4

This thing worked for me. I wanted a rounded shadow around the image 32x32.

<a class="media-links" href="">
   <img class="media-imgs" src="">
</a>

CSS is like this.

        img.media-imgs
        {
            -webkit-border-radius: 20px;
        }

        img.media-imgs:hover
        {
                -webkit-animation-name: greenPulse;
                -webkit-animation-duration: 2s;
                -webkit-animation-iteration-count: 1;
                -webkit-box-shadow: 0 0 18px #91bd09;
        }

Answer 5

CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.

Answer 6

CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.

UPDATE:

Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.