White text shadow css

Web Style Sheets CSS tips & tricks

CSS level 3 has a property called ‘text-shadow’ to add a shadow to each letter of some text. In its simplest form, it looks something like this:

Which adds a dark gray (#333) shadow a little to the right (0.1em) and down (0.1em) relative to the normal text. The result looks like this:

The noak and the barcicle

Fuzzy text shadow

The simplest form of the ‘text-shadow’ property has two parts: a color (such as the #333 above) and an offset (0.1em 0.1em in the example above). This results in a sharp shadow at the indicated offset. But the offset can also be made fuzzy, resulting in a more or less blurred shadow.

The amount of fuzziness is given as another offset. Here are two lines, one with a little fuzziness (0.05em) and one with a lot (0.2em):

“What do you say?” said the UK

In order to see more clearly

Readable white text

Shadows can make text more readable if the contrast between the foreground and the background is small. Here is an example of white text against a pale blue background, first without a shadow and then with:

What is in it for me?

With a shovel and some oranges

Multiple shadows

You can also have more than one shadow. In general, that looks rather strange:

I wish wish wish…

But with two well-placed dark and light shadows, the effect can be useful:

I, Augustus (you know who)

That’s extra, of course

This is a bit dangerous, as you can see if your browser doesn’t support ‘text-shadow’. In fact, the colors of the background and the text in this example are almost the same (#CCCCCC and #D1D1D1), so without the shadows, there is barely any contrast.

Drawing letters as outlines

The two-shadows example of the previous version can be taken even further. With four shadows, letters can be given an outline:

Are you feeling red?

A cat, an apple, etcetera

It is not a perfect outline, and at this time (August 2005), the discussion is still open whether CSS should have a separate property (or perhaps a value for ‘text-decoration’) to make better outlines.

Neon glow

If you put a fuzzy shadow right behind the text, i.e., with zero offset, the effect is to create a glow around the letters. If the glow of a single shadow isn’t intense enough, just repeat the same shadow a few times:

With a zest of best

There’s no no like a better no

Indeed, quite right, Mr M

Site navigation

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 4 August 2005;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Источник

text-shadow

CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations (en-US) . Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

Интерактивный пример

Syntax

/* смещение-x | смещение-y | радиус-размытия | цвет */ text-shadow: 1px 1px 2px black; /* цвет | смещение-x | смещение-y | радиус-размытия */ text-shadow: #fc0 1px 0 10px; /* смещение-x | смещение-y | цвет */ text-shadow: 5px 5px #558abb; /* цвет | смещение-x | смещение-y */ text-shadow: white 2px 5px; /* смещение-x | смещение-y /* Используем значения по умолчанию для цвета и радиуса-размытия */ text-shadow: 5px 10px; /* Значения принятые глобально */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; 

Это свойство определено как разделённый запятыми список теней.

Каждая тень определена как два или три значения , за которыми следует необязательное значение . Первые два значения определяют параметры и . Третье необязательное значение задаёт . Значение определяет цвет тени.

Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.

Значения

Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.

Формальный синтаксис

text-shadow =
none | (en-US)
[ (en-US) ? (en-US) && (en-US) (en-US) ] (en-US) # (en-US)

Источник

CSS Text Shadow

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

Text shadow effect!

Example

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

Text shadow effect!

Example

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

Text shadow effect!

Example

More Text Shadow Examples

Example 1

Text-shadow on a white text:

Example 2

Text-shadow with red neon glow:

Example 3

Text-shadow with red and blue neon glow:

Example 4

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.

The CSS Text Shadow Property

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS text-shadow Property

This property accepts a comma-separated list of shadows to be applied to the text.

Default value:	none
Inherited:	yes
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.textShadow=»2px 5px 5px red» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Note: To add more than one shadow to the text, add a comma-separated list of shadows.

Property Values

Value	Description	Demo
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed	Demo ❯
v-shadow	Required. The position of the vertical shadow. Negative values are allowed	Demo ❯
blur-radius	Optional. The blur radius. Default value is 0	Demo ❯
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values	Demo ❯
none	Default value. No shadow	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Text-shadow with a blur effect:

Example

Text-shadow on a white text:

Example

Text-shadow with a red neon glow:

Example

Text-shadow with a red and blue neon glow:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник