✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Image Shadow CSS

Last Updated : Jan 25, 2023

IN - CSS

Image Shadow CSS

In this article we will show you the solution of image shadow css, as we know css used to style html elements, here we implemented shadow at the rear side of image.

You can set shadow effect for any html elements with same kind of method. You can also try inline or external css method with this same css code as per your modification you get error-free output. With the help of ‘box-shadow’ style property you can achieve result.

Step By Step Guide On Image Shadow CSS :-

In our program we defined img element with attributes ‘src,alt’. The src-refers source path of image value, alt-refers alter name of image.

To display image first you need to set path of image perfectly you cannot get image on webpage. Syntax for shadow given below:

box-shadow(property name): ‘horizontal-point vertical-point blur color-code’.

As per syntax implement this, then you can get cool css shadow effect. Along with shadow box values you can explore two more features as well. 

<!DOCTYPE html>
<html>
    <head>
        <title>Image Shadow</title>
    </head>
    <body>
        <style>
            img{
                width: 10rem;
                height: 10rem;
                box-shadow: 10px 10px 5px #000;
            }
        </style>
        <img src="im.jpg" alt="Sample Picture">
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Within body, we defined style pair tags. There we appending css styles through img element name.
  7. As an foremost step we sets width and height of image to ’10 rem’ size. Then we sets ‘box-shadow’ property with ‘10px 10px 5px #000’ vaues.
  8. That means, first 10px-refers horizontal offset in pixel value, 10px-refers vertical offset in pixel value, 5px-refers blur amount, #000-refers color of shadow (black shade).
  9. After that we provide image element definition, here ‘im.jpg-indicates name of image’, try to give right name and extension for image and ‘Sample Picture-indicates alternate for image’, you can modify this name depends on your thought.
  10. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to set shadow for image using css. When we executes this program on webpage of browser you can see image with perfect shadow.

Here you can only change the path of image, shadow amount or shadow color of image. Your result will vary according to your modification and imported photo depends.

If you are facing difficulties to get correct output, check your path information of picture. Moreover, keeping your image inside program created location will not lead you to face error.

I hope this article on image shadow css helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials