CODEWITHSUNDEEP
htmlcss
FreshBits
FreshBits

Reputation: 1013

how to set shadow for round image(css)

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 advance

Upvotes: 14

Views: 78697

Answers (11)

Dracula
Dracula

Reputation: 19

The best and easy way i can get is to put the image in a div and then provide the border radius same as image to that div and apply box-shadow to that div

.topDiv{
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.img{
  border-radius:50%;
}

this will do the work.

Upvotes: 0

Abhishek Rawat
Abhishek Rawat

Reputation: 131

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.

Upvotes: 2

Qasim
Qasim

Reputation: 1580

Easy peasy! Set border-radius: 50%; on your image element.

It rounds your image tag and it's drop-shadow.

Upvotes: 1

Ritu Singh
Ritu Singh

Reputation: 171

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;
}

Upvotes: 5

Justine Win
Justine Win

Reputation: 101

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

Upvotes: 5

kinath_ru
kinath_ru

Reputation: 4678

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;
        }

Upvotes: 2

j08691
j08691

Reputation: 208002

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.

Upvotes: 4

Frank van Wijk
Frank van Wijk

Reputation: 3262

This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency). You could make a circle with CSS3 and give a shadow, see this jsFiddle.

div {
    background: red;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    margin: 20px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}

Upvotes: 17

haltabush
haltabush

Reputation: 4538

There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...) Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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

Upvotes: 0

SpYk3HH
SpYk3HH

Reputation: 22580

There is great tutorial for box-shadowing with examples here

Also, simple css3 for rounding corners in cross browser 

border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;

just adjust the pix to the corner roundness you want, or use ems instead

Upvotes: 3

Related Questions