text shadow safari

CSS Text-Shadow in Safari, Opera, Firefox and more

The CSS 2 property text-shadow is supported in Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Google Chrome since version 2, Konqueror and iCab. In fact, text-shadow is supported by all browsers that are based on WebKit, the rendering engine behind Safari and Chrome. Internet Explorer 8 does not support such text shadows (except for some DirectX image transform filters).

Animated multiple Shadows (requires JavaScript)

Start/stop animations .

Text shadows were defined in 1997 and became applicable in 2009

Multiple Shadows

Safari 3 supported one shadow only. Only the first shadow was displayed. Safari 4 supports multiple shadows. Opera 9.5 supported at most six shadows. Later, this limitation was dropped. Please note that Opera painted the shadows in the wrong order. This was fixed in Opera 10.5.

Classical Shadows

Glowing borders, unusual effects.

Text Shadow Looking Weird in Safari: A Beginner's Guide

Abstract: Learn how to fix the text-shadow rendering issue in Safari browser for your web development projects.

As a beginner web developer, you may have noticed that the text-shadow property can sometimes look strange in the Safari browser. This article will provide a detailed guide on how to properly use the text-shadow property and avoid any issues in Safari.

What is the text-shadow property?

The text-shadow property is a CSS property that allows developers to apply a shadow effect to text. This can be used to create a variety of visual effects, such as making text appear to be floating above the background or creating a 3D effect.

Why does text-shadow look weird in Safari?

There are a few reasons why the text-shadow property may look strange in Safari:

• Safari has different default values for the text-shadow property than other browsers.
• Safari has a bug that can cause the shadow to appear in the wrong place when the text is rotated.
• Safari has a bug that can cause the shadow to be clipped when the text is near the edge of the viewport.

How to properly use the text-shadow property

To avoid any issues with the text-shadow property in Safari, it is recommended to use the following syntax:

• h-offset is the horizontal offset of the shadow. A positive value will move the shadow to the right, while a negative value will move it to the left.
• v-offset is the vertical offset of the shadow. A positive value will move the shadow down, while a negative value will move it up.
• blur-radius is the amount of blur applied to the shadow. A value of 0 will result in a sharp shadow, while a larger value will result in a softer shadow.
• color is the color of the shadow.

It is also recommended to avoid using the spread value, as it is not supported in Safari.

Here is an example of how to use the text-shadow property correctly:

• MDN Web Docs: text-shadow
• Can I use: text-shadow
• WebKit Bugzilla: text-shadow clipped when near viewport edge
• WebKit Bugzilla: text-shadow offset is wrong when element is rotated

Note: The above references are not part of the question and provided for additional information only.

Encountered a strange text-shadow rendering in Safari? Discover the solution in this article.

Replacing characters in string: appropriate key-value pair map using stream.

In this article, we explore how to replace characters in a String using Java Stream API and appropriate key-value pair map.

Tags: :  Safari Text-shadow Web Development

Latest news

• Displaying a ReactJS App as a WordPress Plugin: No Output in Menu
• Creating a VPN through PHP: Bypassing Restrictions with Google's Gemini API
• Debugging Team Projects: Using GDB with musl-aarch64.so.1 shared library
• jQuery: First Event Handler Doesn't Work - Solution
• Google Ads API: Querying Metrics with Daily Segmenting using criterion_id
• Custom Candle Colors for Alert-based Dashboard
• Mapping Chinese Public Companies with NAICS Codes
• Model Check Failed: Compilation Debug Issue in Beginner's OpenModelica District Heating System Project
• Keyboard Shortcuts: Switching Context in Terminal and RStudio
• Understanding Urql TypeError: t.executeQuery is not a function in Node.js, Next.js, and Urql
• Error: 'ModuleNotFoundError: No module named Blockchain' in Python
• Getting Started with IEEE Node System for Power Grid Engineering Simulations
• Embedding Square Appointment Booking in Angular Websites
• Understanding Search Includes in YouCompleteMe
• Debugging Operating System: GDB Sticks CPU at 100%
• Get Response: Handling JSON Values Shown in Browser Console for AJAX Post Process Changes in WooCommerce
• Sending Embedded HTML Emails with Python: A Newbie's Guide
• Automating File Sync with AWS S3: Excluding Specific File Extension
• Defining a Versioning Strategy for a Software Product with Multiple Modules
• Using Custom JavaScript Function with FastAPI: Display Elapsed Time
• Indoor Positioning Web Application: Unsuccessful Attempt with WebBluetooth API RSSI Receiver
• Adding Multiple Range 1 Selection in Software Development
• MetaSpark Unable to Detect Linked Instagram-Facebook Accounts
• Customizing Title Color in Android's react-native-carplay
• Deploying Next.js 14 on Plesk Server: A New Approach
• Azure Database Watcher Connected to SQL Managed Instance: Missing SQL Managed Instances Dashboard
• Managing Health Checks in AWS Batch for Long-Running EC2 Jobs
• Plotting Line Plot with over a Billion Entries in Python using matplotlib and NumPy Memory-Mapped Arrays
• Resolving Gate.io API v4 WS Socket Connection Issues in Node.js
• Error Compiling Rust Code: 'parametype' must have valid static lifetime, not 'async' block
• Understanding Error Bars in ggplot's GgBoxPlots
• Python Ctypes Structure inside Multiprocessing: RecursionError?
• Tuning PID Controller for Diving Body: Python Implementation
• Python Requests Module Triggers Bot Detection Logic on Website: A Closer Look
• Error C1905 while Building a Library using SWIG in Python

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

text-shadow

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations . Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

This property is specified as a comma-separated list of shadows.

Each shadow is specified as two or three <length> values, followed optionally by a <color> value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius> . The <color> value is the shadow's color.

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

This property applies to both ::first-line and ::first-letter pseudo-elements .

Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.

Required. These <length> values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0 , the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius> .

Optional. This is a <length> value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0 .

Formal definition

Formal syntax, simple shadow, multiple shadows, specifications, browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• The <color> data type (for specifying the shadow color)
• drop-shadow()

20+ CSS Text Shadow Effects

Are you looking to add depth and visual interest to your website's typography? Look no further! We are excited to present our latest update, featuring a comprehensive collection of free HTML and CSS text shadow effect code examples .

With our November 2022 update , we have scoured reputable sources such as CodePen, GitHub , and other reliable platforms to bring you four new and exciting text shadow effect items .

Text shadow effects can transform your plain text into eye-catching elements that grab your visitors' attention and add a touch of elegance to your design.

Our collection includes a wide range of text shadow effect styles, allowing you to choose the ones that best align with your design vision. From subtle and understated shadows to bold and dramatic effects, you'll find a plethora of options to suit your website's branding and style.

In addition to traditional text shadow effects, our compilation also features code snippets that combine text shadows with other CSS properties, such as gradients, animations, and transitions. This allows you to create truly unique and dynamic designs that will captivate your audience and leave a lasting impression.

Whether you're a beginner or an experienced developer, our collection of CSS text shadow effects provides you with the tools to elevate your website's typography and create captivating visual effects. Experiment with different shadow colors, sizes, and styles to create a design that stands out and adds depth to your text.

Dive into our collection and start exploring the world of CSS text shadow effects today. Happy coding!

• Adam Argyle
• July 24, 2021
• demo and code

About a code

Bigger font size, bigger text shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

• Eric Portis
• March 31, 2021

Outlined Text Shadow with Fallback

• February 22, 2021
• HTML / CSS (SCSS)

CSS Text Shadow Effect

A CSS text background shadow effect using the content attribute.

Responsive: no

• October 6, 2020

Funky Retro Text Shadow

• Sebastian Opperman
• July 29, 2019

Quirky CSS banner using box-shadow s.

• October 25, 2018
• HTML (Pug) / CSS (SCSS)

About the code

Popout text with background image shadow.

Cutting out text from a background and then having it "popout" similar to how text shadow can be used. In fact, this does make use of text shadow!

Compatible browsers: Chrome, Firefox, Opera, Safari

• Fielding Johnston
• October 15, 2018

3D Cartoon Text with CSS text-shadow

Playing around with CSS text-shadow and the Google Font "Luckiest Guy".

• September 24, 2018

SCSS 3D Text Mixin

This is a simple SCSS mixin that creates 3D blocky looking text with text-shadows .

• Erin E. Sullivan
• September 10, 2018

Animated text-shadow

A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.

• Martin Picod
• June 13, 2018
• HTML / CSS (SCSS) / JavaScript

Direction-Aware text-shadow

Direction-aware text-shadow , use of CSS variables to create perspective and 3D light effect on text.

• Daniel Gonzalez
• February 15, 2018

Groovy CSS Effect

1960's font effect using CSS text-shadow property along with SASS function and mixins to keep code DRY.

• Nooray Yemon
• October 14, 2017
• HTML (Slim) / CSS (SCSS)

Netflix Style Text Animation with CSS

Netflix style text animation with CSS and a SCSS function to have the long text shadow .

• June 9, 2017

Fancy Text Shadow

• June 6, 2017

CSS text-shadow

Modern shadow effect for text with CSS text-shadow .

Shaded Text

Shaded text, a SVG + CSS3 experiment about animated shadows. It isn't optimized for mobile devices... yet. Made by Rafael González September 16, 2016

• August 24, 2016

Pretty Shadow

Pretty text shadow.

• Dario Corsi
• April 15, 2016

Variable Longshadow with Gradients Mixin

This doesn't need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.

• February 28, 2016
• HTML / CSS / JavaScript

Neon Effects

Neon text-shadow effects.

• Bennett Feely
• August 22, 2015

Pinchy Type with CSS text-shadow

• Nguyen Hoang Nam
• February 9, 2015

Awesome text-shadow

Flat and simple text shadow effect.

• Mayur Elbhar
• November 13, 2014

Text-Shadow

• May 20, 2014

Long Shadow Gradient Mixin

A Sass (SCSS) mixin to quickly generate long shadow gradients. Suitable for both text-shadow and box-shadow .

• Jorge Epuñan
• March 12, 2013
• HTML (Haml) / CSS (Less)

CSS3 text-shadow Effects

• Lucas Bebber
• November 6, 2013

CSS Dashed Shadow

Pure CSS hipster-ish typographic dashed shadow.

CSS Tutorial

Css advanced, css responsive, css examples, css references, css text shadow, text shadow.

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Text shadow effect!

Next, add a color (red) to the shadow:

Then, add a blur effect (5px) to the shadow:

More Text Shadow Examples

Text-shadow on a white text:

Text-shadow with red neon glow:

Text-shadow with red and blue neon glow:

Tip: Go to our CSS Fonts chapter to learn about how to change fonts, text size and the style of a text.

Tip: Go to our CSS Text Effects chapter to learn about different text effects.

Advertisement

Test Yourself With Exercises

Change the text color of all <p> elements to "red".

Start the Exercise

The CSS Text Shadow Property

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

CSS Trick: Improve the Quality of Bold Text in Safari with text-shadow

OS X, the Mac operating system, has a pretty good font rendering engine – it adheres to the intended font proportions closely to create an image of the font on the screen that accurately depicts what you would see printed out on paper.

One complaint that I’ve read about often is that sometimes it makes the fonts a little too blurry or too fat – especially when they are bold. This is made worse when the font is colored in a light color and placed on a dark background.

If you’re designing websites for a sizable Mac audience you can use a little CSS trick to make your bold fonts look better. This involves the “text-shadow” CSS property and will only work in the Safari browser.

Have a look at the following screenshot. Here are three white fonts being rendered on a dark grey background in Safari. All the fonts are bold. You can see that the outcome isn’t very clean – the white seems to spill out, blurring the font.

Now, lets apply a “text-shadow” property to the CSS stylesheet. I’m going to apply a shadow with the same color as the background and everything else (position and blur) set to 0. Here’s the code:

Here’s what we get:

Much better! The shadow seems to have cleaned up the font a lot. It’s no longer spilling out so much, yet it is still clearly bold.

If you like, you can play around with the shadow property to get some nice effects. For example, the following image shows the shadow color set to black, the position to 1 pixel down and the blur set to 0 (text-shadow: #000 0 1px 0;)

This will only currently work on Safari – however, because a large percentage (majority?) of OS X users do use Safari as their main browser, a simple one line of CSS code here and there in my opinion is worth using to enhance the overall quality of your site.

(Edit: 23 Dec 2010) The above no longer works for Safari (or Chrome) unless the shadow blur is set to at least 1 pixel (e.g. “text-shadow: #333 0 0 1px;”)

• / properties
• / text-shadow

text-shadow

The text-shadow property is utilized for adding shadow effects to text elements. It accepts a series of shadow effects, separated by commas, applied to both the text and its decorations. The shadows are applied in front-to-back order, with the first shadow on top, and they can overlay each other but never the text itself.

Each shadow is defined by two to three length values, specifying the x and y offset of the element and an optional blur value. The x-offset indicates the horizontal distance, while the y-offset represents the vertical distance. Additionally, an optional color value can be included, offering a wide range of customization options for the shadow effect.

Note: text-shadow can also be applied to both ::first-line and ::first-letter pseudo-elements.

Examples and Usage

The text-shadow property offers various ways to create diverse effects on text elements, such as using only the required x and y offset values or incorporating blur and color values for more sophisticated results. Let's observe three examples that highlight these different aspects.

• Basic Shadow with X and Y Offset

In the first example, we'll apply a simple shadow to the text using only the x and y offset values.

Here, we used a shadow with only the required x and y offset values. The shadow is positioned 1px to the right and 1px below the text. Since no color or blur is specified, the default user agent color is applied.

• Shadow with Color and Blur

Our second example demonstrates how to apply a shadow with blur and a custom color using the RGBA format.

Specifically, the shadow is positioned 3px to the right and 2px below the text, with a 2px blur radius. The color is specified using the rgba() function, allowing the inclusion of an alpha value to control the opacity.

• Multiple Shadows

In the last example, we'll create a text effect with multiple shadows applied to the same element.

With this approach, the first shadow is positioned 40px to the right and 20px below the text, with a 2px blur radius. The second shadow is positioned 20px to the right and 10px below the text, with a 1px blur radius. Both shadows share the same color, defined using the rgba() function.

The text-shadow property can accept the following values:

Associated Properties

• text-decoration

Tips and Tricks

When using text-shadow , consider using RGBA or HSLA color formats to take advantage of the alpha channel, which allows you to set the opacity of the shadow.

If you don't specify a color for the text-shadow , the user agent will choose a color for you. To ensure consistency across browsers, it's recommended to explicitly specify a color.

Be mindful of the readability of your text when applying shadows, especially when using multiple shadows or complex designs.

Unlike box-shadow , the text-shadow property doesn't provide a "spread" value.

For accessibility purposes, ensure that your text remains legible for users with visual impairments or color blindness. High contrast between the text and its background is essential.

Shadow generators, such as online tools or CSS libraries, can help you create complex and visually appealing text-shadow effects without the need to manually write the code. These tools often provide a user-friendly interface, allowing you to experiment with different shadow settings and preview the results in real time.

Browser Compatibility

Partial support in Safari 3.1-3.2 is due to the lack of support for multiple shadows. Internet Explorer 10 and later versions support a fourth length value for the shadow's "spread," which is not yet part of the official specification.

Caution : Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)

• Useful Resources

Can I use: text-shadow

W3C CSS Text Decoration Module Level 4: text-shadow

On this page

Michael Gearon

Text-shadow in css.

Last updated on November 15, 2022

The text-shadow property is a way to apply shadow to each letter, where the box-shadow property is applied to the boundaries of the element.

The values of the text-shadow property are:

• blur radius

As an example:

This would set the text-shadow as having a 1 pixel offset on the y and x-axis with a 2-pixel blur and a colour of black. It is also possible to define multiple shadows by comma separating:

It is also possible to use HSLa and RGBa values for the colour so you can have transparent text-shadows, as an example:

The offset x and y values are required, the offset x and y specifies the distance from the text. The offset-y sets the vertical distance, if the value is positive the shadow appears below the text and if the value is negative the shadow is placed above the text. The offset-x is the horizontal distance, if the value is positive then the shadow appears to the right of the text, if negative the shadow appears to the left of the text. If both values are 0 then the shadow would be directly behind the text.

An optional value is a colour. If no colour is set then up to the user agent to determine the colour of the shadow. The value of the colour can be placed before or after the offset values in the property. An optional value of how much the colour is blurred. By default it is 0, the higher the value the large the blur.

Browser support

At the time of writing the text-shadow property is supported in all major browsers without browser prefix. It is supported by IE 10 and up, Firefox, Chrome, Safari and all other browsers. Safari 5.1 does require the colour to be defined for the shadow. Opera Mini ignores the blur-radius value so no blur effect is visible.

More CSS guides

• CSS System Fonts
• CSS Text Transform
• line-clamp CSS guide

First published on January 5, 2021

Share this page

Senior Interaction Designer and Co-Author to Tiny CSS Projects

CSS3 Text-shadow

Method of applying one or more shadow or blur effects to text

• 4 - 125 : Supported
• 126 : Supported
• 127 - 129 : Supported
• 12 - 18 : Supported
• 79 - 125 : Supported
• 3.1 - 3.2 : Partial support
• 4 - 17.4 : Supported
• 17.5 : Supported
• 17.6 - TP : Supported
• 2 - 3 : Not supported
• 3.5 - 126 : Supported
• 127 : Supported
• 128 - 130 : Supported
• 9 : Not supported
• 9.5 - 110 : Supported
• 111 : Supported
• 5.5 - 9 : Not supported
• 10 : Supported
• 11 : Supported

Chrome for Android

Safari on ios.

• 3.2 - 17.4 : Supported
• 17.6 - 18.0 : Supported

Samsung Internet

• 4 - 24 : Supported
• 25 : Supported
• all : Partial support

Opera Mobile

• 10 - 12.1 : Supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Opera Mini ignores the blur-radius set, so no blur effect is visible. Text-shadow behavior can be somewhat emulated in older IE versions using the non-standard "dropshadow" or "glow" filters.

CSS Text Shadow

Regular text shadow:

Multiple shadows:

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate 2. value = The Y-coordinate 3. value = The blur radius 4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

Also, remember you can use RGBA values for the color, for example, a 40% transparency of white:

For ‘shadow’ use black eg: rgba(0, 0, 0, 0.4);

Sometimes you need a white shadow for more contrast with the background

i wish i had coda.. (i have windows)

Use SublimeText! : ) http://www.sublimetext.com/

I am a windows user and use Brackets, an Adobe open-source project. Its simply awesome and gives a great coding experience.

Download it at http://brackets.io

The Coda clips addition is a great feature Chris. Thanks.

Love the coda snippet feature. Very nifty.

Great job Chris! Loving the Coda addition.

Oooh! Nice. And lovin’ Coda even more.

AWESOME! Yet another great feature to the site!

Just another great reason why Textmate owns.

Why doesn’t Firefox support CSS text shadows? Is there a workaround for FF?

How about a double – punched out text effect, text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.7); All text-shadow works in FireFox, this works in FireFox also?

Firefox supports text-shadows just fine, and has for a long time now. It’s Chrome they don’t show up in for me. It’s not a Webkit thing either. I get text shadows in Safari, just not Chrome. Webkit seems to have a problem with CSS transitions that I don’t have with Firefox.

Firefox latest does support it.

You may have to use -mozilla-text-shadow. (Not sure though.)

For firefox, just add a copy of those lines and replace “text-shadow” with “-moz-text-shadow”.

Or you can modernizr.js plugin it can add support to any browser for all css attributes and selectors

Is there a way to be able to achieve this effect while still having valid CSS(2.1, I know it’s valid in CSS3, but I need it for CSS2.1 as well).

ya ofcourse u can do in css 2.1 itself.. cheers…

nope -moz-text-shadow doesn’t work

When using multiple shadows… are they rendered in the order they are listed? For example, if I have a 1px shadow could I accidentally cover it with a 3px shadow because I listed them in my CSS in reverse order?

isnt there any other way of using colours in the website codes without typing the color codes. e,g using the name of the colour like red instead of something like this #FFFFF

Scott, you can use names of colors. Just use the name of the color in place of the hex value. The color “blue” is even used in this text-shadow example.

You can find a list of supported CSS color names here:

http://en.wikipedia.org/wiki/Web_colors

Grazie per l’articolo, non puoi immaginare quanto mi sia stato d’aiuto!

Complimenti per il sito!

Hello Be aware that setting css3 text-shadow will affect the anti-aliasing in google chrome on windows. Make a try if you are using Microsoft windows and you will see that in chrome fonts are ugly if you use css3 text-shadow. check the bug report in the Google chrome help forum” . And by the way, thanks Chris for sharing your knowledge.

Great!!! But it is not a valid property……

This is nice to know. I have used it once or twice now.

Finally! I find a straight forward way to use drop shadow with css. I’m a newbie so I appreciate your post. Thank you

props on the fools and horses reference :)

Thanks for this Nice thread ;)

I’m playing with it but I’m little confused about inner shadow! Is it possible or any way to use inner-shadow?

Nice Tutorial!, The text-shadow property really rocks.

Okay, I’ll speak my friend…..

Hmmm….. you should show the demo page, so the other user can see what the exact goal of the article you write.

good tutorial, its really helpful for my website. thank you

Its not working on explorer. But grate post

how i can do it to works in IE?????

Perfect! Thank you so much. I’m assuming no support for IE? Surprise surprise.

Thank you sir.

Here’s an example to brighten up your day – my own text shadow rainbow effect…

Absolutely of no use at all, but I like it.

I agree, the rainbow text is beautiful! Useless yes. But still beautiful :)

I think we can make this more browser friendly by attaching browser names in front of property like ::

-webkit-text-shadow:0px 0px 10px #333; /* for chrome */ -text-shadow:0px 0px 10px #333; /* for all browser*/ text-shadow:0px 0px 10px #333; /* same as above*/ -moz-text-shadow:0px 0px 10px #333; /* for firefox */ -o-text-shadow:0px 0px 10px #333; /* for opera */ -ms-text-shadow:0px 0px 10px #333; /* for ie 9+ */ -khtml-text-shadow:0px 0px 10px #333; /* for gecko based browser*/

and thats all

Thanks man. Your code helped me alot. I appreciated that! ;)

@kishan sharma.

Make sure the “standard” property is the last one you use.

“text-shadow:….” should be after all “browser specific properties”

This way when a browser finally implements the property standard, it uses it.

@Isaac Designer

You can go to http://fetchak.com/ie-css3/ and download ie.htc file in root of ur server and then you can enjoy text-shadow in ie 5 also

also you can use p { zoom: 1; background-color: #cccccc; filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99); }

<p>Catpops Design Shadow goes here</p> if you still dont wanna use ie.htc file chroma and zoom will do all your required editing good luck

nice site anyway. ;)

@Charles Bodman

Thanks for awsome note sir ya i do agree good point

No more coda snippet feature?

Heu Louis take a look at http://css3pie.com/ . Its a nice lib that allow using most CSS3 features on IE using and .HTC solution. It work nice and is one of best solutions i have seen for now.

Reggards from Ccss-tricks, continue posting

Thank you very much. This article help me alot to complete a CSS3 project. I also thankful to @kishan sharma for the codes provided for other browsers. Thank you for sharing.

Newbie here… how would you do this to a single word within a paragraph of text?

@Kevin Add a span around your word using the text shadow property. For example: &ltp>This is how to apply a text shadow to this &ltspan style=”text-shadow: 1px 1px 1px #000;”>word&lt/span>&lt/p>

Though you would probably create a class for this and include it in your stylesheet instead of having in the HTML.

i also had this problem with firefox but kishan solution was really useful and works thanks kishan

Nice, text-shadow property….really it’s awesome.

moz-text-shadow doesn’t work

Brilliant, thank you!

My Firefox works with text-shadow, shame even ie9 won’t play though.

This is so great! With a little more experimentation I made some more elaborate styles using the text-shadow property. You can see them here, Extruded Styles and Elegant Styles .

IE 10 now supports text-shadow !!! Finally

Cheers’

This works well for large text. I’m going to use it of article headings that link to the article.

check out other css3 text-shadow effects, and text board with text-shadow

http://jignesh2882.wordpress.com/2013/06/03/text-shadow-using-css3/

Thanks a lot! Can make buttons look a lot better now.

Text glow effects can be achieved like this :

text-shadow: 0 0 10px #c61a1a;

Create a raised text effect with this code

Can see a detailed demo here

I saw a shadow once. It was dark. I was scared.

Very nice good job.. i am really thank full to you all guys… thanks.

Basic text-shadow:

h1 { text-shadow: 2px 2px #ff0000; }

label { text-shadow: 1px 1px 1px #000, 4px 4px 4px red; }

No company shifted quite sufficient Hess אחסון אתרים וורדפרס Israel from 5 per month .All appropriate web hosting packages owners of WordPress sites, image site, and Irtaolit store, e-commerce, portal and more. In addition, the company shifted quite hes no specialized Peron Intentia business owners such as advanced virtual server rental, domain registration and packs boxes. Mail under the domain name of the business. No ace diverted enough – Hostdns.co.il –

I’m a newbie at this so how would I add a shadow to a single word within a paragraph? It would be a big help.

Try wrapping that word in a <span> and adding the shadow to it.

For example, in your HTML:

Hello <span class="text-shadow">World</span>

…and in your CSS:

.text-shadow: { text-shadow: 3px 3px 3px #333; /* or however you want to style it */ }

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Mastering CSS3 Text Shadows

Share this article

Browser Support

Text-shadow versus box-shadow, text-shadow, frequently asked questions (faqs) on mastering css3 text shadows.

Offsets and Color

If the color is absent, the used color is taken from the ‘color’ property.

omitted colors are a UA-chosen color.

Expansion and Contraction

Multiple Shadows

Emulating Expansion

More Samples

Interactive Sample

What is the significance of the color value in CSS3 text shadows?

The color value in CSS3 text shadows is crucial as it determines the color of the shadow. It can be defined using the name of the color, hexadecimal values, RGB, RGBA, HSL, or HSLA values. The color value is the first value in the text-shadow property. It’s important to choose a color that complements or contrasts with the text color for readability and aesthetic purposes.

Can I apply multiple shadows to a single text in CSS3?

Yes, you can apply multiple shadows to a single text in CSS3. To do this, you separate each shadow with a comma. Each shadow is defined by 2-4 values: horizontal offset, vertical offset, blur radius, and color. This allows you to create layered, complex, and visually interesting text effects.

How does the blur radius value work in CSS3 text shadows?

The blur radius value in CSS3 text shadows determines the extent of the blur effect on the shadow. It’s the third value in the text-shadow property. A larger blur radius results in a more blurred, softer shadow, while a smaller blur radius results in a sharper, more defined shadow. The blur radius value can be adjusted to achieve the desired text shadow effect.

What happens if I omit the color value in the text-shadow property?

If you omit the color value in the text-shadow property, the shadow will take the color of the text. This is because the color value is optional in the text-shadow property. However, specifying a color allows you to create more varied and visually interesting text shadow effects.

How does the horizontal and vertical offset values affect the text shadow in CSS3?

The horizontal and vertical offset values in CSS3 text shadows determine the position of the shadow relative to the text. The horizontal offset value moves the shadow to the left or right, while the vertical offset value moves the shadow up or down. Positive values move the shadow right and down, while negative values move the shadow left and up.

Can I use CSS3 text shadows to create a 3D text effect?

Yes, you can use CSS3 text shadows to create a 3D text effect. This is achieved by applying multiple shadows with different offset and color values to give the illusion of depth. This can make your text stand out and add a dynamic element to your web design.

Are CSS3 text shadows supported in all browsers?

CSS3 text shadows are widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, they are not supported in Internet Explorer. It’s always a good idea to check the current browser support for CSS3 features to ensure compatibility.

How can I make my text shadow more visible?

To make your text shadow more visible, you can increase the contrast between the text color and the shadow color. You can also increase the blur radius to make the shadow larger and more noticeable. Additionally, adjusting the offset values can help to make the shadow more distinct.

Can I animate CSS3 text shadows?

Yes, you can animate CSS3 text shadows using CSS animations or transitions. This allows you to create dynamic, interactive text effects that can enhance user engagement and the overall user experience.

How can I use CSS3 text shadows to improve readability?

CSS3 text shadows can be used to improve readability by providing contrast between the text and the background. A subtle text shadow can make the text stand out more, especially on complex or varied backgrounds. However, it’s important to use text shadows judiciously to avoid making the text difficult to read.

Konstantin Kichinsky works at Microsoft Russia as Academic Developer Evangelist with special focus on HTML5 and IE, and apps design and UX for Windows Phone. Catch his blog here .

Text-shadow

Skip navigation .

Site search

Site navigation.

• How To Create home

Text shadow allows you to put a shadow of the current text behind it, but on top of the background. It is easy to use as a simple elegant shadowing effect. However, this is perhaps most useful when putting text on a background image that may have too much contrast. The text may not be easily visible against the background. Adding a text-shadow allows you to have an outline around the text so that it blends in with the image, but is more visible.

Text shadow was introduced in CSS 2.0 , but no browsers implemented it, so it was removed from CSS 2.1 and will be put into CSS 3. Then some of the browsers started implementing it. As a result, browser support is not as high as you might hope, so it is important not to get carried away. For example, it is tempting to make a white background, white text, and a black text-shadow, creating a halo effect. But in browsers that do not support it, the text will be invisible and useless. The following text has this effect applied to it:

This text is invisible and useless in many browsers.

Browser support

Currently, the text-shadow style is supported by 5 browser families; Opera 9.5+, Chrome/Safari 1.1+, Mozilla/Firefox 3.1+, Konqueror 3.4+ and iCab 3.0.3+. It is also possible to emulate some parts of text-shadow in Internet Explorer. It is also possible to use CSS tricks to emulate simple text-shadows in all current browsers. Note that this is one case where Safari and Chrome have completely unrelated implementations. Chrome and Safari will have differing levels of support, and different levels of support.

This page contains examples of text-shadow. To see those examples, you will need a browser that supports text-shadow. I suggest you use Opera, since it is available for free for the common platforms. It is best not to use or rely on Safari's response, since it is by far the most limited and buggy of all. Versions of Firefox are available that support text-shadow, but these are still very much in development, and should not yet be treated as stable. No public final releases of Mozilla/Firefox support text-shadow yet.

One of the most impressive features of text shadow is the blur. The shadow can be blurred so that it does not have hard edges, and blends in with the background as the edges of the blur become transparent.

Applying a blurred text shadow is quite CPU intensive, as the browser has to blur text to the given radius. It then has to display that blurred text using alpha transparency layered betwen the normal text and its background. Using a blurred text-shadow for a large amount of text may use a lot of CPU power, and may make the page respond slowly to scrolling or mouse interaction. For this reason, it is important to restrict the use of text-shadow to where is makes sense or is really needed.

The larger the radius, the more processing power is needed. Most browsers have a limit. Safari and Opera cannot blur beyond around 100 pixels. iCab cannot blur beyond around 30 pixels. Konqueror has no limit, but will crash if the blur is around 300 pixels. A blur of 200 pixels is so extreme that it is not visible in Konqueror anyway. Mozilla/Firefox has no limit but will become unresponsive with very large blur values. Note that even though Safari and iCab have a limit, you can set a blur higher than that limit. If you set it higher, they will use as much CPU as you might expect for that larger blur, but the result will be a blur at their respective limits.

Opera, Konqueror and Mozilla/Firefox apply a normal linear blur to the shadow. Safari and iCab use system calls to create the blurred shadow. The result in iCab and Safari 3- looks like an exponential shadow, meaning that it is less blurred near its source. As a result, a 30 pixel blur in iCab and Safari 3- looks a lot smaller than a 30 pixel blur in Opera, Konqueror, Firefox and Safari 4+.

A simple shadow

• Safari cannot apply a shadow without a colour specified.
• Safari 3- always makes the offsets 1px less than they should be, so 2 becomes 1, 1 or 0 or -1 become 0, -2 becomes -1 etc.
• Konqueror cannot display a text-shadow that is offset vertically by more than 100 pixels from the source text.
• Mozilla/Firefox displays unnecessary scrollbars if the shadow extends more than half way across the browser window in either direction.
• Mozilla/Firefox 3.1 beta 2- blurs shadows slightly more than the requested blur value, then clips the shadows to the required distance, making them end too abruptly and appear too faint.
• Opera does not show any changes when a shadow is changed with script, until something else causes it to redraw.

In its simplest form, a shadow is created like this:

That would create a green drop-shadow behind the text, positioned two pixels lower than the main text, three pixels to the right of it, and with no blur.

This paragraph has that style rule applied to it.

The following example would create a blue drop-shadow, two pixels higher than the main text, one pixel to the left of it, and with a 0.5em blur:

The colour can be put first or last in the property value, or omitted completely. If omitted, the CSS 2.0 specification says the text's colour should be used as the colour of the shadow, and CSS 3 say that the browser should assume a default value (typically black). Which one the browser uses will depend on which specification its support is based on. It is best not to rely on either behaviour; always specify an appropriate colour.

If a shadow is applied to one element, and that element has another element within it, the inner element should inherit the shadow from its parent. (Note that this is not specified in CSS 2.0, but has been corrected in CSS 3.) If the inner element also has a shadow of its own, then that shadow will be used instead of the parent's shadow, not in addition to it.

Multiple shadows

• Safari 3- cannot do multiple shadows for one piece of text.

The text-shadow style can accept multiple values, in a comma separated list. According to CSS 2, the shadows are laid down in the order they appear, so if they overlap, the last one that is specified should appear on top. CSS 3 has now changed that so they are applied in reverse order. The response of an individual browser will depend on which specification its implementation is based on. In the following example, the text has both of the shadows from the example above:

Safari 3- does not understand this, but it does not apply the normal error handling either (which would be to ignore the whole rule, and allow us to specify two rules, one for Safari 3-, and one for better browsers). It will take just the first shadow from the value, and apply that, ignoring any other shadows. Better browsers will apply all of the shadows together:

These browsers still have internal limitations to how many shadows they can have for a single piece of text. Opera is limited to 32 tokens in the text-shadow style's value (a token is anything like "1px", "red", or ","), giving a maximum of 11 shadows if the colour and blur are not specified, and 6 if they are. iCab is limited to 129 tokens in the text-shadow style's value, giving a maximum of 43 shadows if the colour and blur are not specified, and 25 if they are. Konqueror has no limit but will crash if you use more than 419 shadows on a single piece of text. Mozilla/Firefox has no limit but can crash if you use a very large number of shadows on a single piece of text (the exact number depends on various factors, but is typically in the order of several thousand shadows).

Shadows overlay previous text

If, for example, you apply a shadow to some text, and offset that shadow so it intersects text from an earlier paragraph, the shadow will appear on top of the text from that earlier paragraph. In Konqueror, Safari, Mozilla/Firefox and Opera, the same thing will happen if you offset the shadow so that it intersects an earlier line of text in the same paragraph. In Opera, the same will happen if it intersects an earlier word in the same line of text.

In most cases, this is not a problem, since most shadows are offset to the right and below, not above or to the left. Even when they are, the blur usually allows the main text to show through the shadow very easily. However, you may need to be careful to avoid obscuring earlier text with a shadow.

Emulating text-shadow in Internet Explorer

Though it pains me to do it, I know many of you will not be interested in using CSS unless it works in Internet Explorer. I will re-emphasize that you should only use text-shadow for decoration, and you should never make your page rely on it. As such, you should be able to make your pages look extra nice in good browsers, while still being OK for Internet Explorer. However, if you still feel the need to make it work in Internet Explorer, there are two proprietary CSS filters that IE can use (the trick relies on filters which did not work in IE 8 betas 1 and 2 since the hasLayout bug was fixed). They are both very limited compared with the proper text-shadow style, but then, this is IE, and that is nothing new.

The two filters are "glow" and "dropshadow". Glow emulates a blurred text-shadow, but cannot be offset. Dropshadow emulates an offset shadow, but cannot be blurred, and cannot be applied to elements with their own backgrounds. So both have very significant problems.

On top of that, both can only be applied to an element if it also has one of the following styles set: display:block+height, display:block+width, or position:absolute. This limits their use even more. Both are also applied to all parts of the element, not just its text. So if you want to use this effect in IE, it is best to wrap the text inside an otherwise unstyled element (such as a span), set one of those styles on it, then apply one of the filters, depending on which effect you want. In general, the glow effect is the one you would want to use.

In both cases, the effect will only be applied over the element itself. If the shadow or glow is large enough to exceed the bounds of the element, it will be truncated.

Because these filters are not valid CSS, and because the other styles required by IE may cause unwanted effects in other browsers, it is best to isolate the IE-specific garbage inside conditional comments to protect good browsers from it:

This text should have a shadow.

Emulating text-shadows by repeating text

The major advantage of using the text-shadow style is that the text only appears once in the source of the page. That means that it looks correct to search engines, it makes sense to screen readers, speech readers, Braille readouts, and text browsers. It is isolated to being just a visual effect. However, if we ignore those browsers and search engines (which I do not like doing, but here we are anyway), then it is possible to emulate basic text shadows by duplicating and carefully positioning text.

The idea is to have an outer container with the text inside it. Also inside it should be other elements that are positioned relating to the container so they are jut a few pixels offset from it in the chosen directions. To do this, the container needs to be a block level element (such as a paragraph or more ususally, a heading), and its contents should be inline elements (such as spans) that contain the repeated text. The container itself must also contain the text directly, as that is needed to stretch it to the correct size.

The inner elements are then absolutely positioned, and set to the same size as their parent container. The last one of these (which will be stacked on top of the others by its implied z-index) will serve as the "original" text. Any others, as well as the base text, will serve as shadows. This means that the offsets must not be too much, or the positioning will look odd. Typically, this effect would be used with two shadows set at -2px,-2px and 2px,2px offset from the "original", to give it a glowing effect:

This paragraph has those styles applied to it. This paragraph has those styles applied to it. This paragraph has those styles applied to it.

Note that you could also use CSS generated content to do this, but that would lose support for IE 7- and Mozilla/Firefox 3.0-, and you would be back where you started.

• Sign up Free

Code has been added to clipboard!

CSS Text Shadows

• 1. Adding text shadows in CSS
• 2. CSS text-shadow property syntax
• 2.1. Available values
• 3. Browser support

Adding text shadows in CSS

By using the CSS text-shadow property, you can add a customized shadow to a text:

By combining multiple selectors , you can add the same type of shadow to multiple elements:

CSS text-shadow property syntax

To add a CSS font shadow, you need to define from two to four values:

text-shadow: h-shadow v-shadow blur-radius color;

In the example below, you can see all four values defined. All of them will be explained in detail in the following section:

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced
• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features
• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

• Easy to navigate
• No technical issues
• Seems to care about its users
• Huge variety of courses
• 30-day refund policy

Available values

Notice that vertical and horizontal values can be negative :

Browser support

Mobile browser support

Css typography, css backgrounds & colors, css effects, css responsive, css element styling, css references, css properties, best-rated moocs to learn programming:.

Related Posts

A sorted list of css code examples: master styling html elements.

Easily accessible CSS code examples: CSS styles, borders, tables, buttons & more. Discover many CSS examples in this comprehensive CSS code example list.

Guide on Adding CSS Shadow Effect to Text Content and Other Elements

Easy ways of creating CSS shadow right in this guide. Learn how to utilize CSS drop shadow with your HTML elements. CSS shadow examples included.

CSS Text: Learn to Set Colors, Spacing, Direction and Alignment

Learn to change CSS text attributes easily. Follow this CSS text tutorial and examples to learn basics of CSS text style and cool CSS text tricks.

Related Code Examples

EXCLUSIVE OFFER: GET 25% OFF

Use CSS to Add Various Shadows to Text and Elements

Adding shadows is a great way to create the illusion of depth and perspective, whether on a photograph, graphic design, or even on a web page! With the help of CSS3 properties, you can add such an effect to text, images, and other elements in a web page, without the need for jumping into Photoshop or other graphic editing software.

There are two properties you can use. Both these properties work in most browsers, and the following specifies the first browser versions that fully support them:

• text-shadow: Chrome 4.0, Internet Explorer 10.0, Firefox 3.5, Safari 4.0, and Opera 9.5
• box-shadow: Chrome 10.0, Internet Explorer 9.0, Firefox 4.0, Safari 5.1, and Opera 10.5

CSS3 Text Shadow

Just like other CSS properties, the text-shadow property is true to its name and adds a shadow to text. The basic syntax for this usually specifies only the horizontal and vertical shadow, plus the color. For example:

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

In the example above, the first 2px specifies the horizontal offset, and the second specifies the vertical offset. Red, of course, specifies the color of the shadow. If left unspecified, the default color is black. You can use either color names (such as red) or hex codes (such as #FFFFFF for white).

Adding a third pixel specification makes the shadow blur in that amount of pixels. For example:

Using 0 horizontal and vertical offsets with a blur will create a neon-like glow effect. For example:

Multiple Text Shadow Variations

You can add more than one shadow to a piece of text, using comma-separated values.

In the example below, there’s a purple-ish effect due to a 3-pixel wide red neon glow and a 5-pixel wide blue neon glow:

In the example below, the white text has a gradient-like effect from a 2-pixel wide black neon glow, a 25-pixel wide blue neon glow, and a 5-pixel wide dark blue neon glow:

In the example below, the pink text has a plain black border around it, minus the shadows:

CSS3 Box Shadow

The box-shadow property can apply shadows to non-text elements in a web page. It can be an image, div, or any other non-text element. While there are many complex ways of adding shadows, the ones discussed here are the most simple and straightforward ones.

The basic syntax for this usually specifies only the horizontal and vertical shadow, plus the color. For example:

In the example above, the first 3px specifies the horizontal offset, and the second specifies the vertical offset. The third value specifies the blur radius of 5px. The optional fourth value specifies the spread radius of 6px. Lastly, #ccc specifies the color of the shadow. If unspecified, the default color is black. You can use either color names (such as red) or hex codes (such as #FFFFFF for white), as well as rgba and hsla color values.

In the example above, the word inset specifies that the direction is inwards. The first 0 specifies the horizontal offset, and the second specifies the vertical offset. The third value specifies the blur radius of 10px. Lastly, #000000 specifies the color of the shadow. If unspecified, the default color is black. You can use either color names (such as red) or hex codes (such as #FFFFFF for white), as well as rgba and hsla color values.

CSS3 properties can help you add personality to your work using color, depth and perspective. Play around with the codes above to add flavour to a photograph, graphic design, or web page. Happy designing!

Share and Enjoy !

• global">Global
• indonesia">Indonesia
• united_kingdom">United Kingdom

We got you covered. Don’t miss out on the latest news by signing up for our newsletters.

By subscribing, you agree to our Terms of Use and Privacy Policy .

Download Our App

• dark_mode" data-event-name="menu_navigation" data-custom-event="null" class="dark-mode icon-type d-none d-lg-flex nav-item">
• login">Login
• sign_up">Sign Up
• search" data-event-name="menu_navigation" data-custom-event="null">
• Food & Beverage
• Movies & TV
• Tech & Gadgets
• Brand Ranking
• Brand Directory
• Hypebeast100

The OG Nike Air Safari Is Returning This Month

As part of the brand’s overarching “safari” theme for the 2024 olympic games..

Name: Nike Air Safari OG Colorway: Black/Monarch/Light Iron Ore/Black SKU: HM3818-001 MSRP: $140 USD Release Date: July 19 Where to Buy:   Nike

It has been 37 years since Tinker Hatfield and Nike presented the Air Safari , which introduced the iconic safari print that has been utilized across many different Nike and Jordan Brand silhouettes. Now, with safari print playing a key role across various Olympic Games-themed pairs that have been spotted for this year — involving everything from the SB Dunk Low to the Air Force 1 Low — it has unveiled that the original Air Safari will be making a return as well.

What to Read Next

Nike Air Foamposite One "International Blue" Is Slated To Return Later This Fall

Nike Dunk Low "Plum" Returns This Month

Nike Air Flightposite "Metallic Gold" Is Returning Later This Year

The Nike Kobe 8 Protro "Venice Beach" Returns This Month

Kendrick Lamar Drops Triumphant "Not Like Us" Music Video

Lewis Hamilton Launches +44 "Home Turf" Collection

Ultra-Rare Porsche 911 Carrera RS 3.0 Surfaces

LEGO Ideas Reveals Its New 'JAWS' Set

First Look at the CAYL x New Balance 1906R

Cactus Plant Flea Market Just Dropped A 'Despicable Me 4'-Themed Capsule

We Experienced the Power of Hennessey's VelociRaptoR 1000 Super Truck

An Air Jordan 12 "Blueberry" Is Rumored to Release This Year

Merrell 1TRL Unveils the Next Generation of Its Hydro Family

8 Drops You Don't Want to Miss This Week

Twitchy, Truss-scarred UK bond market awaits a Labour government

• Medium Text

1) STILL-HIGH BORROWING COSTS

2) BRITAIN TESTS THE MARKET

3) RATE CUTS ARE COMING

4) SOLID DEMAND

5) UNCERTAIN INTEREST COSTS

Sign up here.

Reporting by Harry Robertson; Editing by Dhara Ranasinghe and David Holmes

Our Standards: The Thomson Reuters Trust Principles. New Tab , opens new tab

World Chevron

UK's Labour sweeping into power with huge majority, exit poll shows

Keir Starmer will become Britain's next prime minister on Friday with his Labour Party set to win a massive majority in a parliamentary election, an exit poll indicated, forecasting Rishi Sunak's Conservatives would suffer historic losses.