Spec-Zone.ru › CSS

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

Базовая поддержка Широко доступно

Эта возможность хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она поддерживается браузерами с июля 2015 года.

Свойство text-shadow CSS добавляет тени к тексту. Оно принимает список теней, разделённых запятыми, которые применяются к тексту и любым его text-decoration. Каждая тень задаётся комбинацией смещений элемента по осям X и Y, радиуса размытия и цвета.

Попробуйте

text-shadow: 1px 1px 2px pink;

text-shadow: #ffcc00 1px 0 10px;

text-shadow: 5px 5px #558abb;

text-shadow: red 2px 5px;

text-shadow: 5px 10px;

text-shadow:
  1px 1px 2px red,
  0 0 1em blue,
  0 0 0.2em blue;

<section id="default-example">
  <p id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy...
  </p>
</section>

p {
  font:
    1.5em "Georgia",
    serif;
}

Синтаксис

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #ffcc00 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;

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

Каждая тень задаётся двумя или тремя значениями <length>, за которыми может следовать значение <color>. Первые два значения <length> — это значения <offset-x> и <offset-y>. Третье, необязательное значение <length> — это <blur-radius>. Значение <color> задаёт цвет тени.

Если задано несколько теней, они применяются от переднего плана к заднему: первая указанная тень располагается сверху.

Это свойство применяется как к ::first-line, так и к ::first-letter псевдоэлементам.

Значения

color
Необязательно. Цвет тени. Его можно указать до или после значений смещения. Если цвет не указан, его значение остаётся на усмотрение пользовательского агента, поэтому для единообразного отображения в разных браузерах рекомендуется задавать его явно.
<offset-x> <offset-y>
Обязательно. Эти значения <length> задают расстояние тени от текста. <offset-x> задаёт горизонтальное расстояние; отрицательное значение помещает тень слева от текста. <offset-y> задаёт вертикальное расстояние; отрицательное значение помещает тень над текстом. Если оба значения равны 0, тень располагается непосредственно за текстом, хотя она может быть частично видна из-за эффекта <blur-radius>.
<blur-radius>
Необязательно. Это значение <length>. Чем оно больше, тем сильнее размытие; тень становится шире и светлее. Если значение не указано, по умолчанию используется 0.

Формальное определение

Начальное значение none
Применяется к всем элементам
Наследуется да
Вычисленное значение цвет и три абсолютные длины
Тип анимации a <a href="/en-US/docs/Web/CSS/Reference/Properties/box-shadow#interpolation" title="Компоненты цвета, координат x и y, размытия и распространения (если применимо) списков теней интерполируются независимо. Если значение inset у какой-либо пары теней различается в двух списках, весь список не поддаётся интерполяции. Если один список короче другого, он дополняется прозрачными тенями, у которых все длины равны 0, а значение inset совпадает со значением более длинного списка.">список теней</a>

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

text-shadow = 
  none |
  <shadow-t>#

<shadow-t> = 
  [ <length>{2,3} && <color>? ]

<color> = 
  <color-base> |
  currentColor |
  <system-color> |
  <light-dark()> |
  <deprecated-system-color>

<color-base> = 
  <hex-color> |
  <color-function> |
  <named-color> |
  <color-mix()> |
  transparent

<system-color> = 
  AccentColor |
  AccentColorText |
  ActiveText |
  ButtonBorder |
  ButtonFace |
  ButtonText |
  Canvas |
  CanvasText |
  Field |
  FieldText |
  GrayText |
  Highlight |
  HighlightText |
  LinkText |
  Mark |
  MarkText |
  SelectedItem |
  SelectedItemText |
  VisitedText

<light-dark()> = 
  light-dark( <color>, <color> )

<deprecated-system-color> = 
  ActiveBorder |
  ActiveCaption |
  AppWorkspace |
  Background |
  ButtonHighlight |
  ButtonShadow |
  CaptionText |
  InactiveBorder |
  InactiveCaption |
  InactiveCaptionText |
  InfoBackground |
  InfoText |
  Menu |
  MenuText |
  Scrollbar |
  ThreeDDarkShadow |
  ThreeDFace |
  ThreeDHighlight |
  ThreeDLightShadow |
  ThreeDShadow |
  Window |
  WindowFrame |
  WindowText

<color-function> = 
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <hwb()> |
  <lab()> |
  <lch()> |
  <oklab()> |
  <oklch()> |
  <color()>

<named-color> = 
  aliceblue |
  antiquewhite |
  aqua |
  aquamarine |
  azure |
  beige |
  bisque |
  black |
  blanchedalmond |
  blue |
  blueviolet |
  brown |
  burlywood |
  cadetblue |
  chartreuse |
  chocolate |
  coral |
  cornflowerblue |
  cornsilk |
  crimson |
  cyan |
  darkblue |
  darkcyan |
  darkgoldenrod |
  darkgray |
  darkgreen |
  darkgrey |
  darkkhaki |
  darkmagenta |
  darkolivegreen |
  darkorange |
  darkorchid |
  darkred |
  darksalmon |
  darkseagreen |
  darkslateblue |
  darkslategray |
  darkslategrey |
  darkturquoise |
  darkviolet |
  deeppink |
  deepskyblue |
  dimgray |
  dimgrey |
  dodgerblue |
  firebrick |
  floralwhite |
  forestgreen |
  fuchsia |
  gainsboro |
  ghostwhite |
  gold |
  goldenrod |
  gray |
  green |
  greenyellow |
  grey |
  honeydew |
  hotpink |
  indianred |
  indigo |
  ivory |
  khaki |
  lavender |
  lavenderblush |
  lawngreen |
  lemonchiffon |
  lightblue |
  lightcoral |
  lightcyan |
  lightgoldenrodyellow |
  lightgray |
  lightgreen |
  lightgrey |
  lightpink |
  lightsalmon |
  lightseagreen |
  lightskyblue |
  lightslategray |
  lightslategrey |
  lightsteelblue |
  lightyellow |
  lime |
  limegreen |
  linen |
  magenta |
  maroon |
  mediumaquamarine |
  mediumblue |
  mediumorchid |
  mediumpurple |
  mediumseagreen |
  mediumslateblue |
  mediumspringgreen |
  mediumturquoise |
  mediumvioletred |
  midnightblue |
  mintcream |
  mistyrose |
  moccasin |
  navajowhite |
  navy |
  oldlace |
  olive |
  olivedrab |
  orange |
  orangered |
  orchid |
  palegoldenrod |
  palegreen |
  paleturquoise |
  palevioletred |
  papayawhip |
  peachpuff |
  peru |
  pink |
  plum |
  powderblue |
  purple |
  rebeccapurple |
  red |
  rosybrown |
  royalblue |
  saddlebrown |
  salmon |
  sandybrown |
  seagreen |
  seashell |
  sienna |
  silver |
  skyblue |
  slateblue |
  slategray |
  slategrey |
  snow |
  springgreen |
  steelblue |
  tan |
  teal |
  thistle |
  tomato |
  turquoise |
  violet |
  wheat |
  white |
  whitesmoke |
  yellow |
  yellowgreen

<color-mix()> = 
  color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})

<rgb()> = 
  rgb( <percentage>#{3} , <alpha-value>? ) |
  rgb( <number>#{3} , <alpha-value>? ) |
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<rgba()> = 
  rgba( <percentage>#{3} , <alpha-value>? ) |
  rgba( <number>#{3} , <alpha-value>? ) |
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

<hsl()> = 
  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hsla()> = 
  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ) |
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )

<lab()> = 
  lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<lch()> = 
  lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<oklab()> = 
  oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )

<oklch()> = 
  oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

<color()> = 
  color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]

<alpha-value> = 
  <number> |
  <percentage>

<hue> = 
  <number> |
  <angle>

<colorspace-params> = 
  [<custom-params> | <predefined-rgb-params> | <xyz-params>]

<rectangular-color-space> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020 |
  lab |
  oklab |
  xyz |
  xyz-d50 |
  xyz-d65

<polar-color-space> = 
  hsl |
  hwb |
  lch |
  oklch

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue

<custom-color-space> = 
  <dashed-ident>

<custom-params> = 
  <dashed-ident> [ <number> | <percentage> | none ]+

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}

<xyz-params> = 
  <xyz> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = 
  srgb |
  srgb-linear |
  display-p3 |
  display-p3-linear |
  a98-rgb |
  prophoto-rgb |
  rec2020

<xyz> = 
  xyz |
  xyz-d50 |
  xyz-d65

Примеры

Простая тень

.red-text-shadow {
  text-shadow: red 0 -2px;
}

<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Несколько теней

.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em "Georgia",
    serif;
}

<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>

Спецификации

Спецификация
Модуль оформления текста CSS уровня 3
# text-shadow-property

Совместимость с браузерами

Настольные Мобильные
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet WebView Android WebView on iOS
text-shadow
2
12
3.5В версиях Firefox до 57 есть ошибка: transition не работают при переходе от text-shadow с указанным цветом к text-shadow без указанного цвета (ошибка 726550).
Начиная с Firefox 4, радиус размытия ограничен значением 300 из соображений производительности.
Теоретически Firefox поддерживает бесконечное количество теней текста (не пытайтесь это проверить).
Если значение <color> не указано, Firefox использует значение свойства color элемента.
9.5Из соображений производительности Opera поддерживает не более 6–9 теней текста. Радиус размытия ограничен значением 100px.
В Opera с версии 9.5 по 10.1 соблюдается старый порядок отрисовки в обратном порядке (в CSS2 первая указанная тень находится внизу).
1.1В Safari тени, для которых явно не указан цвет, являются прозрачными.
Safari с версии 1.1 по 3.2 поддерживает только одну тень текста (отображает первую тень из списка, разделённого запятыми, и игнорирует остальные). Safari 4.0 (WebKit 528) и более поздние версии поддерживают несколько теней текста.
18
4В версиях Firefox for Android до 57 есть ошибка: transition не работают при переходе от text-shadow с указанным цветом к text-shadow без указанного цвета (ошибка 726550).
Начиная с Firefox for Android 4, радиус размытия ограничен значением 300 из соображений производительности.
Теоретически Firefox for Android поддерживает бесконечное количество теней текста (не пытайтесь это проверить).
Если значение <color> не указано, Firefox for Android использует значение свойства color элемента.
14
1В Safari тени, для которых явно не указан цвет, являются прозрачными.
Safari iOS 1 и 2 поддерживают только одну тень текста (отображают первую тень из списка, разделённого запятыми, и игнорируют остальные). Safari iOS 3 (WebKit 528) и более поздние версии поддерживают несколько теней текста.
1.0
4.4
1В Safari тени, для которых явно не указан цвет, являются прозрачными.
Safari iOS 1 и 2 поддерживают только одну тень текста (отображают первую тень из списка, разделённого запятыми, и игнорируют остальные). Safari iOS 3 (WebKit 528) и более поздние версии поддерживают несколько теней текста.
none
2
12
3.5
15
1.1
18
4
14
1
1.0
4.4
1

См. также

  • Введение в тени текста
  • color
  • box-shadow
  • drop-shadow()
  • Модуль оформления текста CSS

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-shadow

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API