Html span text shadow

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.

Источник

Shadows and neon effects on text in HTML

For the newer browsers, being able to use the type of stylesheets called CSS3 , there is an effect called ‘text-shadow’, that can be used for shadow effects on texts and objects. Objects are shown on another page, as there is so many effects you can do with text-shadow, they need to be adressed separately.

Text-shadow consists of two parts: a specification of the displacement, i.e. the length of the shadow, and the color. The displacement is defined left/right and up/down, so you can choose where the «light» comes from.

Shadow effects equivalent to the light coming from the upper left corner, requires a «pull» in two directions. For simple shadow effect using a dark grey shadow, the code looks like this:

Here the text is normal, here there is a shadow, if the browser support CSS3, and here the text return to normal.

On the page, when shown, it looks like this:

Here the text is normal, here there is a shadow, if the browser support CSS3, and here the text return to normal.

Therefore, if you want to make a purple shadow, and simulate that the light is from a source right below the text, it looks like this:

Here the text is normal, here there is a shadow, if the browser support CSS3, and here the text return to normal.

On the page, when shown, it looks like this:

Here the text is normal, here there is a shadow, if the browser support CSS3, and here the text return to normal.

Blurry text shadow

Instead of the sharp edged text shadow, you can make a blurry shadow, by adding a third value for how far you want to stretch the shadow.

If we look at our grey shadow from before, and give it an additional value, the code looks like this:

Here the text is normal, here there is a blurry shadow, if the browser support CSS3, and here the text return to normal.

On the page, when shown, it looks like this:

Here the text is normal, here there is a blurry shadow, if the browser support CSS3, and here the text return to normal.

The bigger the third value, the more blurry the shadow becomes.

Multiple shadows on an object

It is possibel to have multiple shadows at the same time. This is done by specifying multiple sets of shadows, separated by comma.

If we try adding three shadows in blue, green and red, the code looks like this:

On the page, when shown, it looks like this:

Offhand, it may look at bit odd having multiple shadows at the same time, but by combining a light and dark shadow (not blurry), you can get a rather good contrast effect, in case text and background have similar colors, thus manking it hard to read, e.g. two gray nuances:

Here the text is normal, here the shadows give contrast, if the browser support CSS3, and here the text return to normal.

On the page, when shown, it looks like this:

Here the text is normal, here the shadows give contrast, if the browser support CSS3, and here the text return to normal.

If you apply four shadows (not blurry), instead of contrast you get a lineout of the characters:

Here the text is normal, here there is an outline on the characters, if the browser support CSS3, and here the text return to normal.

On the page, when shown, it looks like this:

Here the text is normal, here there is an outline on the characters, if the browser support CSS3, and here the text return to normal.

If you do this, there can be an advantage in giving the characters a little extra space by using letter-spacing. If we look at the text from before, and set letter-spacing to 1px, the code becomes:

Here the text is normal, here there is an outline on the characters, if the browser support CSS3, and here the text return to normal.

On the page, when shown, it looks like this:

Here the text is normal, here there is an outline on the characters, if the browser support CSS3, and here the text return to normal.

Neon effects

Like the outline, you can make a neon effect, i.e. a blurry outline. This is simply done by having a blurry shadow, as described above, but without a displacement in the x-y plane. The the code looks like this:

On the page, when shown, it looks like this:

If you think the neon effect isn’t strong enough, you can apply it several times. Here we try with two times, then the code looks like this:

Then the neon effect looks like this:

The colors can of course be combined and given different size, so you get a bit of color change, e.g. the two times red shadow, here given a bit of yellow right around the characters. The code is:

Then the neon effect looks like this:

Effects like this don’t work really well on smaller fonts like the ones used for main text, but for font sizes used for headlines, you can get some useful effects, it is only a matter of trying out some ideas.

© Michael Pilgaard .
Contact information: If you have comments, questions or corrections, please send them to Michael Pilgaard
Legislation: Copyright, ownership information and cookies- and privacy policy

Источник

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.

Try it

Syntax

/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /* Use defaults for color and blur-radius */ text-shadow: 5px 10px; /* Global values */ text-shadow: inherit; text-shadow: initial; text-shadow: revert; text-shadow: revert-layer; text-shadow: unset; 

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

Each shadow is specified as two or three values, followed optionally by a value. The first two values are the and values. The third, optional, value is the . The 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.

Values

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.

Formal definition

Initial value	none
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	yes
Computed value	a color plus three absolute lengths
Animation type	a shadow list

Источник

CSS свойство text-shadow

Свойство text-shadow дает возможность добавлять тени к тексту. Можете выбрать цвет отсюда: HTML Цвета.

Каждая тень может иметь две или три значения и . Первое значение устанавливает горизонтальное смещение (x-offset), второе значение устанавливает вертикальное смещение (y-offset), а третье — радиус размытия и цвет тени.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется	Да
Анимируемое	Да
Версия	CSS3
DOM синтаксис	object.style.textShadow = «1px 3px 3px #8ebf42»;

Синтаксис

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

Пример

html> html> head> title>Заголовок документа title> style> .shadow< text-shadow: 2px 2px #1c87c9; > style> head> body> h2>Пример свойства text-shadow h2> p>Какой-нибудь параграф. p> p class="shadow">Какой-нибудь параграф со свойством text-shadow. p> body> html>

Рассмотрим пример, где указаны значения x-offset, y-offset, blur-radius и color:

Пример

html> html> head> style> p < text-shadow: 5px 3px 2px #8ebf42; font: 1em Roboto, Helvetica, sans-serif; > style> head> body> h2>Пример свойства text-shadow h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. p> body> html>

Значения

Значение	Описание
h-shadow	Горизонтальное смещение тени. При положительном значении тень располагается с правой стороны текста, а при отрицательном значении с левой стороны.
v-shadow	Вертикальное смещение тени (ось y). При положительном значении тень располагается снизу от текста, а при отрицательном — сверху.
blur-radius	Определяет степень и размер размытия тени. Отрицательные значения недопустимы. Значение по умолчанию — 0.
color	Дает возможность выбрать цвет тени. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
none	Тень не устанавливается. Значение по умолчанию.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

Поддержка браузера

Источник