Skip to content

Courses
Tutorials
Practice
Contests

CSS Tutorial
CSS Exercises
CSS Interview Questions
CSS Selectors
CSS Properties
CSS Functions
CSS Examples
CSS Cheat Sheet
CSS Templates
CSS Frameworks
Bootstrap
Tailwind
CSS Formatter

How to Apply Shadow Effect on Text Using CSS?

How to Add Shadow to Text using CSS?

Last Updated : 28 Oct, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

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 Apply Shadow Effect on Text Using CSS?

M

manaschhabra2

Improve

Article Tags :

CSS
Web Technologies
CSS-Questions

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 usi

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. Syntax text-shadow: verticalShadow horizo

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 gene

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 wh

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

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences