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?
- Add Shadow Effect to Image using box-shadow
- Add Shadow Effect to Image using drop-shadow
- Adding Shadow Effect to Images in Cloudinary
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.
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:
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:
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:
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:
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>
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>
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!