How to create a drop shadow effect using CSS ?

How to Apply Shadow Effect on Text Using CSS?

Last Updated : 19 Nov, 2024

The CSS text-shadow property is used to add a shadow to the text.

Adding a shadow to text using CSS text-shadow

The text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.

Syntax

text-shadow: verticalShadow horizontalShadow blur color;

Example 1: A shadow is added to the text using the text-shadow property.

HTML

<h1>Text without shadow</h1>
<h1 style="text-shadow: 5px 5px rgb(82, 78, 78);">Text with Shadow</h1>

Output

text-shadow

Example 2: A blur effects added to the text using the text-shadow property.

HTML

<h1>Text without Shadow</h1>
<h1 style="text-shadow: 7px 7px 4px rgb(143, 135, 135);">
  	Text with shadow and blur effect
</h1>

Output

text-with-blur-and-shadow — text with blur and shadow

How to create a drop shadow effect using CSS ?

M

manikumarsingh789

Improve

Article Tags :

Similar Reads

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 Shadow to Text using CSS?

The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis.Note: We can customize text shadow by changing position, blur, and color for improved appearance and visual

How to Create Embossed Text Effect using CSS ?

The embossed text effect creates a 3D illusion, making text appear raised or pressed into the page. Using CSS, this effect is achieved by applying contrasting text-shadow values that simulate light and shadow, giving the text a visually elevated or indented appearance.Approach:Basic HTML Structure:

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

Apply Glowing Effect to the Image using HTML and CSS

While surfing most of the websites you have seen some special effects which can be seen on various images while putting your cursor over them. So, in this article, we are going to implement the same. We can use such images as a card for our website.Â In this article, youâ€™re going to learn how to app

How to Shake Text on hover using HTML and CSS?

Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.HTML Code: In this section we have a basic div element which contains some text inside of it.

How To Create Carved Text Effect using CSS?

The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro

How to Skew Text on Hover using HTML and CSS?

Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi

How to Create Paradoxical Effect using CSS ?

Paradoxical effect is the effect where the divs or the elements are placed in circular form top of each other. This type of effect is useful when you want to design a circular button that opens up when you hover and each button assigns some task and place like the top of each other. In the below exa

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