Skip to content
Related Articles

Related Articles

How to apply no shadow in an element using CSS ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 18 Apr, 2021

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!