How to apply no shadow in an element using CSS ?
Sometimes we need an element that has no shadow, although initially there is no element that has box-shadow. Sometimes some other developer has styled an element that has the box-shadow property, but you want to make it shadowless.
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
.png)
