How to apply no shadow in an element using CSS ?

How to use drop-shadow on SVG element using CSS3 ?

Last Updated : 14 Oct, 2024

Using drop-shadow on an SVG element with CSS3 means applying a shadow effect that enhances the appearance of the SVG graphic. This effect is controlled through properties like horizontal/vertical offsets, blur radius, and color, creating depth and visual impact.

SVG is used for creating images that can be scaled without losing resolution. CSS3 offers to style and animate SVG graphics. We can apply drop shadow using the 'filter' property.

Adding drop shadow to SVG Using CSS3 filter property

The Adding drop shadow to SVG using CSS3 filter property approach applies the drop-shadow() function to SVG elements, controlling shadow properties like offsets, blur radius, and color. This enhances the SVG's appearance by creating depth and visual focus.

Syntax:

 rect {
         filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  }

Example 1: In this example we creates an SVG graphic containing a red rectangle and green text "GeeksforGeeks". The rectangle and text are placed inside a 200x200 SVG canvas without applying any drop shadow effects.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Drop shadow Using CSS3</title>
</head>

<body>
    <svg width="200" height="200">
        <rect x="20" y="20" width="100" 
            height="100" fill="#f00" />
        <text x="20" y="150" fill="green">
            GeeksforGeeks
        </text>
    </svg>
</body>

</html>

Output:

drop-shadow example

We can select the target element by using the CSS selector property.

Example 2: In this example applies a drop shadow to a green circle (<circle>) using the filter: drop-shadow() property, creating a shadow effect for visual depth.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Drop shadow Using CSS3</title>
    <style>
        #cr {
            filter: drop-shadow(4px 6px 1px rgb(5, 5, 5));
        }
    </style>
</head>

<body>
    <svg width="300" height="200">
        <circle cx="150" 
                cy="100" 
                r="80" 
                fill="green" id="cr" />
        <text x="150" y="125" 
              font-size="60" 
              text-anchor="middle" 
              fill="white">
            GFG
        </text>
    </svg>
</body>

</html>

Output:

drop-shadow example

How to apply no shadow in an element using CSS ?

R

ruturajsinhrathod3

Improve

Article Tags :

Similar Reads

How to create a drop shadow effect using CSS ?

In this article, we are going to learn how to create a drop shadow effect using CSS. drop-shadow() is an inbuilt function used to create a blurred shadow in a given offset and color. A drop shadow effect adds depth and visual interest to elements on a web page by creating a shadow behind them. This

How to apply no shadow in an element using CSS ?

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 bei

How to add a box-shadow on one side of an element using CSS?

The box-shadow property is used to set the box shadow on one side of element. Syntax: box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of t

How to Apply Shadow Effect on Text Using CSS?

The CSS text-shadow property is used to add a shadow to the text.Adding a shadow to text using CSS text-shadowThe text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.Syntaxtext-shadow: verticalShadow horizonta

How to use SVG with :before or :after pseudo element ?

Using SVG with :before or :after pseudo-elements in CSS allows for the dynamic insertion of vector graphics into HTML elements. This technique enhances design flexibility by leveraging SVG's scalability and interactivity while maintaining a clean HTML structure and reducing HTTP requests for image a

Drop shadow for PNG image using CSS

There is a basic way to add shadow effect on images but that effect will behave like the image is square, so there is another way to do the shadow which is basically applied on PNG images. The normal shadow effect will always put a square image shadow for the image which can be squared or cannot be

How to Create a Gradient Shadow using CSS ?

A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e

How to Add a Shadow to an Element ?

Adding shadow to the elements enhances the appearance of the UI elements. Shadow is a property that makes the element look in the 3D visuals. Below are some of the approaches to add shadow to an element: Table of Content Using drop-shadow() filter propertyUsing box-shadow PropertyUsing drop-shadow()

How set the shadow color of div using CSS ?

In this article, we will see how to set the shadow color of the div using CSS. Like humans have their shadows we can use CSS to make any color of shadow to the div element. Box shadow property: This property is used to create one or more than one shadow of an element. Syntax: box-shadow: h-offset v-

How to Set the Inset Shadow Using CSS ?

In CSS, setting an inset shadow involves creating an inner shadow effect within an element's boundaries. Unlike traditional shadows that appear outside the element, an inset shadow gives a recessed or sunken look, enhancing the element's visual depth and appearance.Note: By default, the shadow gener