Css shadow on fonts

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

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.

Источник

CSS Shadow Effects

In these chapters you will learn about the following properties:

CSS Text Shadow

The CSS text-shadow property applies shadow to text.

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

Text shadow effect!

Example

Next, add a color to the shadow:

Text shadow effect!

Example

Then, add a blur effect to the shadow:

Text shadow effect!

Example

The following example shows a white text with black shadow:

Text shadow effect!

Example

The following example shows a red neon glow shadow:

Text shadow effect!

Example

Multiple Shadows

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

The following example shows a red and blue neon glow shadow:

Text shadow effect!

Example

The following example shows a white text with black, blue, and darkblue shadow:

Text shadow effect!

Example

You can also use the text-shadow property to create a plain border around some text (without shadows):

Border around text!

Example

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.

Источник