How to apply no shadow in an element using CSS ?
Last Updated :
06 Jun, 2023
In this article, we are going to learn How to apply no shadow in an element using CSS, To remove the box shadow from an element in CSS, you can use the box-shadow property with a value of none, like this: box-shadow: none, This will effectively remove any existing shadow or prevent a shadow from being applied to the element.
In this article, we will see how to remove the box shadow of an element in CSS.
Syntax:
box-shadow: none;
Example: The following example demonstrates a button containing a box-shadow property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button with box-shadow</title>
<style>
#btn {
padding: 10 20;
background: transparent;
box-shadow: 1px 1px 1px 1px red;
}
</style>
</head>
<body>
<button id="btn"> Click me</button>
</body>
</html>
|
Output:
Example 2: The following example demonstrates a button after removing the box-shadow property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Button without box-shadow</title>
<style>
#btn {
padding: 10 20;
background: transparent;
box-shadow: none;
}
</style>
</head>
<body>
<button id="btn"> Click me</button>
</body>
</html>
|
Output:
no shadow
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...