• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

CSS to add Image Box Shadow (at Bottom, Top, Right, Left)

Aniruddha Chaudhari/12246/0
CodeHTML & CSS

In this tutorial, you are going to learn simple CSS tricks to add shadow to images.

You can use a box-shadow CSS property to add shadow to PNG images.

CSS to Add Image Box Shadow | Example

img {
    box-shadow: 5px 5px 15px 5px grey;
}

Here first four options depict the pixel size of the shadow. The last option is the color of the shadow.

If you apply the this CSS to the image. The image looks like below.

box-shadow CSS example

Adding a simple shadow box to the image, the image gets standout and looks more attractive.

You can choose any pixel size and colors. This box shadow feature works irrespective of the image types like PNG, JPG, JPEG, etc.

Image box-shadow at Bottom and Right

If you want to show the shadow at the bottom and right side of the image, specify only two options for pixel size.

img {
    box-shadow: 5px 5px grey;
}

By changing values in the pixel size, you can set the shadow at any side of the image like top, bottom, right or left.

Multiple box-shadow with Different Color

You can also apply multiple shadow to the image by separating them with the ‘,’ comma.

Here we are applying shadow-box of different colors.

img {
    box-shadow: 5px 5px grey, 10px 10px 8px red, 15px 15px 8px green;
}

If you have a website and want to apply this feature to all the images on your website, you can add above CSS code in your CSS style sheet. You don’t need to do it for individual images.

Disable box-shadow

By default, there will be no box-shadow to the images. But if you have applied box shadow for all the images and want to disable for particular image, you can disable it.

Disable the shadow for an image by passing none to the box-shadow.

img {
    box-shadow: none;
}

Other CSS Tutorial:

  • Adding Drop Cap using CSS
  • How to Optimize CSS?

I hope you find this simple trick of CSS to add image box shadow useful. If yes, let me know your thought in the comment.

Python Interview Questions eBook

CSS
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard