How to Add Shadow in CSS?

How to Add Shadow to Text using CSS?

Last Updated : 28 Oct, 2024

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 impact.

Syntax

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Example 1: Adding a shadow to the <h2> text using the text-shadow property, with a horizontal offset of 2px, vertical offset of 3px, and blue color, creating a shadow effect for the text.

HTML

<h1>
	Add shadow to text using CSS
</h1>

<h2 style="text-shadow: 2px 3px blue;">
	GeeksforGeeks a Computer Science Portal.
</h2>

Output

adding-shadow-to-text-by-text-shadow — Basic Text Shadow Example Output

Example 2: Adding a shadow effect by using the text-shadow property. The third value (6px) specifies the blur radius, making the shadow appear softer and more diffused, while rgba controls color and opacity.

HTML

<h1>Below is a text with shadow effect</h1>

<h2 style="text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);">
	Text Shadow with Blur Effect Example
</h2>

Output

output — How to Add Shadow to Text using CSS?

How to Add Shadow in CSS?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to Add Stroke using CSS ?

Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges.Several methods can be used to add strokes usin

How to bold the text using CSS ?

In HTML, we use the <b> and <strong> tags to make content bold. However, when it comes to styling text, CSS provides a more versatile way to achieve boldness through the font-weight property. This property allows you to set various boldness levels for your text to mark something importan

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 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

How to Add Shadow in CSS?

Shadows in CSS can be used to create depth and visual interest by adding the effect that simulates the shadow of an element. It can be applied to both the text and block elements to enhance the design of the web pages. CSS can provide several properties to achieve different shadow effects, including

How to Add Text Shadow in Tailwind CSS?

Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we

How to Add Shadow to Image in CSS ?

Adding shadow to an image can enhance its visual appeal and make it stand out on your webpage. In this article, we will explore various approaches to add shadow to an image using CSS. Table of Content Add Shadow on Image using box-shadow PropertyAdd Shadow on Image on HoverAdd Shadow on Image using

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 Add Shadow to Button in CSS ?

This article will show you how to add shadow to a button using CSS. Button shadow can enhance its visual appeal and make it stand out on your webpage. This article will cover various approaches to adding shadow to a button using CSS. Table of Content Add Shadow on button using box-shadow PropertyAdd

How to add a mask to an image using CSS ?

The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper