How to Add Shadow to Text using CSS? Last Updated : 28 Oct, 2024 Summarize Comments Improve Suggest changes Share 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.Syntaxtext-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> OutputBasic Text Shadow Example OutputExample 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> OutputHow to Add Shadow to Text using CSS? Comment More infoAdvertise with us Next Article How to Add Shadow to Text using CSS? M manaschhabra2 Follow Improve Article Tags : Web Technologies CSS 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 usin 2 min read 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 1 min read 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 2 min read 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 4 min read 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 3 min read Like