Image Effects Creating Custom Image Cropping Interfaces in Android How to Create Simple Yet Effective PHP Overlay Understanding Real-Time Image Recognition How to add a shadow effect to an image with CSS How to crop an image in Flutter with Cloudinary How To Rotate an Image with Java Image Processing with Python Rotating an image with CSS Enhancing User Experience with a Responsive Image Slider Building a Python Image Recognition System Building an Interactive JavaScript Image Manipulation Tool Image Align Centering with HTML and CSS Efficient Image Cropping Techniques with Angular and Cloudinary Ultimate Guide to Photo Gallery on Android A Comprehensive Guide to Adding Text to Images on Android Mastering Background Changes in React Applications Comprehensive Guide on Changing Background on Android Devices Mastering Image Rotation in Java A Guide to Adding Text to Images with Python A Guide to Converting Images to Grayscale with Python Introduction Creating an Image Overlay with JavaScript Rotating an Image in Python Creating a Dynamic Photo Gallery with jQuery Creating An Interactive Photo Gallery Using JavaScript Mastering Overlay in Android Mastering Angular Overlay: A Comprehensive Guide Comprehensive Guide to Overlay in Flutter Mastering Overlay React for Responsive Design Solutions Create a Blurred Image with PHP: A Comprehensive Guide Guide to Using Blur Image in Flutter Mastering Blur Image in React Native Mastering Image Blurring in Python Mastering the Art of Image Blurring Mastering the Art of Image Blurring in Java The Ultimate Guide to Blurring Images on Android Understanding and Implementing Blur Image in JQuery An Extensive Walkthrough of Blurring Images with JavaScript How to Use HTML, CSS, and JavaScript to Make an Image Slider HTML Image Tag How to Crop GIFs? How to Align Images with CSS Ken Burns Effect – Complete Guide and How to Apply It Cartoonify – Complete Guide on Cartoonify Image Effect Mastering Web Aesthetics: A Comprehensive Guide to Gradient Fades Sepia Effect: The Ultimate Guide to the Sepia Photo Effect What is Vignette? Guide to Vignette Image Editing Pixelate – The Ultimate Guide to the Pixelation Effect How to Outline an Image: Enhancing Visual Appeal and Depth Make Your Photos Pop with Image Effects Upscale Image – Developers guide to AI-driven image upscaling Image Manipulation: History, Concepts and a Complete Guide A Full Guide to Object-aware Cropping Simplify Your Life with Automatic Image Tagging How To Resize Images In WordPress How To Create a Progress Bar For Asset Uploads Animated GIFs – What They Are And How To Create Them How To Automatically Improve Image Resolution AI Drop Shadow Get Image Dimensions From URLs Automatically Add Sepia Effect To Images Automatically Make an Image a Cartoon Automatically Add Blur Faces Effect To Images Automatically Add Background Removal Effect to an Image How to Resize an Image with React How to Easily Resize an Image with React Native

How to add a shadow effect to an image with CSS

shadow_effect_css

CSS, or Cascading Style Sheets, is a powerful tool used to control the presentation of HTML documents. It allows developers to separate content from design, making it easier to style and format web pages. One of the many ways CSS can enhance web design is by adding shadow effects, which can significantly improve the visual appeal and user experience of a website.

Shadow effects in CSS include box shadows and text shadows, which create depth and dimension, making elements stand out and appear more interactive. By applying these effects, designers can achieve a more polished and professional look, emphasizing important content and guiding users’ attention. Whether creating subtle, soft shadows for a modern aesthetic or bold, dramatic shadows for emphasis, mastering CSS shadow techniques is essential for any web designer aiming to enhance the visual dynamics of their site. This article will explore how to add and customize these shadow effects to elevate your web design.

In this article:

What is a Shadow Effect?

In CSS, a shadow effect is a technique that adds a shadow around a text, element, or image. Shadow effects are used for many purposes, such as making elements appear more prominent or creating a three-dimensional view.

Three CSS properties are commonly used for adding shadow effects. These include:

text-shadow

This is used for adding shadows to text and can include X and Y offsets, blur radius, and color. For example, text-shadow: 2px 2px red adds a red shadow with a horizontal and vertical offset of 2 pixels. It has the following syntax:

text-shadow: offset-x | offset-y | blur-radius | color

box-shadow

Adds shadows around elements on a web page. Shadows can indicate an object’s size and depth or if an element is interactive. We can also use the :hover pseudo-class to add or modify shadows on elements.

Syntax:

box-shadow: <'box-shadow-color'>?  && [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  && <'box-shadow-position'>?
  • box-shadow-color: The color of the shadow.
  • box-shadow-offset: The horizontal or vertical distance of the shadow from the element, specified in pixels. Positive values move the shadow to the right, and negative values move it to the left.
  • box-shadow-blur (optional): The blur radius of the shadow, specified in pixels. A larger value creates a more diffused shadow.
  • box-shadow-spread (optional): The spread radius of the shadow, specified in pixels. Positive values increase the size of the shadow, and negative values decrease it.
  • box-shadow-position: The position of the shadow relative to the element. If set to inset, the shadow is drawn inside the element’s box, creating an inset or sunken effect. The shadow is drawn outside the element’s box if set to outset, creating a raised effect. The default value is outset.

shadow_effect_css

filter

This can be used together with the drop-shadow function to create a drop-shadow effect on images. In addition to drop-shadows, the filter property can also be used to add visual effects, such as contrast, brightness, saturation, blur, etc., to images and other elements on a web page.

Syntax:

filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Add Shadow Effect to Image using box-shadow

Let’s take a look at the following code to add a shadow to an image using the box-shadow property.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Shadow Effect</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
      }
      .box-shadow {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;
        width: 50%;
      }

      .box-shadow img {
        height: 50%;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="box-shadow">
      <img
     src="https://images.unsplash.com/photo-1624390001255-8961cf1d1dcf?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Example Image"
      />
    </div>
  </body>
</html>

Here’s the result of the above code:

shadow_effect_css

Applying multiple shadows with box-shadow

We can apply multiple shadows to an image by separating each shadow declaration with a comma. This can create interesting and complex shadow effects. Here’s an example:

.box-shadow img {
        height: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(0, 0, 0, 0.2),
              0 0 30px rgba(0, 0, 0, 0.1);
      }

Which gives the following:

shadow_effect_css

You can play with this interactive box-shadow generator by MDN to visualize shadow effects before adding them to your images.

Add Shadow Effect to Image using drop-shadow

Let’s modify the previous HTML to use the CSS filter property together with drop-shadow to add a shadow effect to the image.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Box Shadow Effect</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
      }
      .box-shadow {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70%;
        width: 50%;
      }

      .box-shadow img {
        height: 50%;
		filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
      }
    </style>
  </head>
  <body>
    <div class="box-shadow">
      <img
        src="https://images.unsplash.com/photo-1624390001255-8961cf1d1dcf?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Example Image"
      />
    </div>
  </body>
</html>

The above code gives the following output:

shadow_effect_css

Applying multiple shadows with drop-shadow

It’s also possible for us to add multiple shadows to an image using drop-shadow. Here’s how:

.box-shadow img {
	height: 50%;
	filter: drop-shadow(7px 5px 5px rgba(245, 149, 149, 0.777))
	drop-shadow(-7px -5px 7px rgba(247, 169, 169, 0.77))
	drop-shadow(5px 5px 5px rgba(244, 122, 122, 0.7));
}

And we get this cool effect:

shadow_effect_css

Adding Shadow Effect to Images in Cloudinary

If you are working with images uploaded to Cloudinary and want to apply shadow effects to those images, the process is very simple. Let’s take the following image uploaded to Cloudinary, for example: https://res.cloudinary.com/demo/image/upload/cld-sample.jpg

We can directly apply the shadow effect to the image URL using the e_shadow parameter like so:

 <https://res.cloudinary.com/demo/image/upload/e_shadow/cld-sample.jpg>

We can customize the offset values of the shadow by setting the x and y parameters:

<https://res.cloudinary.com/demo/image/upload/e_shadow,x_20,y_20/cld-sample.jpg>

shadow_effect_css

We can also control the shadow’s blurring level (level range: 0-100, default level: 40). The following example sets the blur level to 90:

<https://res.cloudinary.com/demo/image/upload/e_shadow:80,x_20,y_20/cld-sample.jpg>

We can also specify the shadow’s color using a color name. co_red in the example below sets the shadow color to red:

<https://res.cloudinary.com/demo/image/upload/e_shadow:80,x_20,y_20,co_red/cld-sample.jpg>

shadow_effect_css

Wrapping Up

Adding shadow effects to images can greatly enhance their visual appeal and create a sense of depth and dimension. However, to provide a consistent user experience, always ensure you consider accessibility and browser compatibility when using shadow effects.

Unlock the full potential of your digital content with Cloudinary’s advanced editing and optimization tools. Sign up for free today!

QUICK TIPS
Colby Fayock
Cloudinary Logo Colby Fayock

In my experience, here are tips that can help you better add shadow effects to images using CSS:

  1. Combine box-shadow and drop-shadow for complex effects Use both box-shadow and drop-shadow together to achieve more layered, realistic effects. box-shadow works best for flat elements, while drop-shadow can add depth around complex shapes or transparent PNGs.
  2. Use RGBA for subtle shadow control Utilize rgba() colors for shadow transparency control. For example, rgba(0, 0, 0, 0.1) creates a softer shadow, perfect for achieving depth without being too harsh.
  3. Match shadow direction with light source Align your shadows with a consistent light source on your page to make them look natural. For instance, if light falls from the top-left corner, shadows should be cast toward the bottom-right.
  4. Implement hover-triggered shadows for interactivity Create more dynamic UI effects by increasing shadow size or changing its color when users hover over an image. This subtle feedback makes the element feel interactive and more engaging.
  5. Add perspective with varying blur levels Manipulate the blur radius to create depth illusions. Larger blur values (box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)) simulate distance, making the element appear farther from the page.
  6. Use inset shadows for inner depth For an inset effect (like a pressed button), use the inset keyword in box-shadow. This is useful for creating elements that look sunken or indented within their container.
  7. Test shadow performance on mobile Heavy use of shadows can affect performance on mobile devices. Optimize shadow effects by using lower blur values and fewer layers to reduce rendering complexity on mobile screens.
  8. Apply shadows dynamically with media queries Adjust the intensity of shadow effects based on screen size using media queries. For smaller screens, lighter and more minimal shadows improve readability and reduce visual clutter.
  9. Create gradient shadows for realism Achieve smoother shadow transitions by using a gradient as a shadow element overlay or using multiple shadows with decreasing opacity to simulate more natural light behavior.
  10. Use multiple shadows for more realistic depth Experiment with multiple shadows in one box-shadow declaration, layering them for complex effects like soft outer glows or multiple light sources. Adjust each layer’s blur and offset to enhance depth.

These techniques will help you master shadow effects in CSS, ensuring that your images and design elements stand out with visually appealing depth and polish.

Last updated: Oct 2, 2024