Home > Article > Web Front-end > Add shadow to image using CSS3

Add shadow to image using CSS3

WBOYforward: 2023-09-03 18:17:051189browse

To add a drop shadow to an image in CSS3, use the drop shadow value of the filter property. It has the following values -

h-shadow – Specifies the pixel value of the horizontal shadow.

v-shadow > – Specifies the pixel value of the vertical shadow. Negative values place the shadow above the image.

Blur – Adds a blur effect to shadows.

Diffusion - Positive values make the shadow expand, negative values make the shadow shrink.

Color – Adding Color to Shadows

Example

Live Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%);
   filter: contrast(120%);
   filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Output

使用 CSS3 添加阴影到图像

The above is the detailed content of Add shadow to image using CSS3. For more information, please follow other related articles on the PHP Chinese website!

css3

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to create an area chart using CSSNext article：How to create an area chart using CSS

See more

Add shadow to image using CSS3

Example

Output

Related articles