---
title: box-shadow
slug: Web/CSS/box-shadow
tags:
  - CSS
  - CSS свойства
  - CSS стили
  - HTML цвета
  - Стили
  - тени
translation_of: Web/CSS/box-shadow
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">CSS-свойство <strong><code>box-shadow</code></strong> позволяет добавлять элементу одну или несколько теней, указывая их параметры через запятую.</span> Свойство тени представляет собой описанные смещения по x и y от элемента, радиус размытия и его радиус, а также цвет.</p>

<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>



<p>Свойство <code>box-shadow</code> позволяет вам задать тень для почти любого элемента. Если элементу задано свойство {{cssxref("border-radius")}}, то тень также будет с закруглёнными углами. Расположение теней по оси z будет такое же, как и при применении свойства <a href="/ru/CSS/text-shadow">text-shadow</a> (первая тень будет впереди остальных).</p>

<p><a href="/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Генератор box-shadow generator</a> - интерактивный инструмент, позволяющий вам генерировать <code>box-shadow</code>.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css no-line-numbers">/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Глобальные ключевые слова */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
</pre>

<p>Чтобы задать одну тень, можно использовать:</p>

<ul>
 <li>Два, три и четыре значения <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>.

  <ul>
   <li>Если задано только два значения, они интерпретируется как <code><a href="#&lt;offset-x> &lt;offset-y>">&lt;offset-x&gt;&lt;offset-y&gt;</a></code> values.</li>
   <li>Если задано третье значение, оно понимается как <code><a href="#&lt;blur-radius>">&lt;blur-radius&gt;</a></code>.</li>
   <li>Если задано чертвёртое значение, оно интерпретируется <code><a href="#&lt;spread-radius>">&lt;spread-radius&gt;</a></code>.</li>
  </ul>
 </li>
 <li>Дополнительно, можно задать ключевое слово <code><a href="#inset">inset</a></code>.</li>
 <li>Дополнительно, можно задать значение <code><a href="#&lt;color>">&lt;color&gt;</a></code>.</li>
</ul>

<p>Чтобы задать несколько теней, перечислите их через запятую.</p>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><a id="inset" name="inset"><code>inset</code></a></dt>
 <dd>Если ключевое слово <code>inset</code> не указано (по умолчанию), тень будет снаружи элемента (и создаст эффект выпуклости блока).<br>
 При наличие ключевого слова <code>inset</code>, тень будет падать внутри блока и создаст эффект вдавленности блока. Inset-тени рисуются в пределах границ элемента (даже прозрачные), поверх фона и за контентом.</dd>
 <dt><a id="&lt;offset-x> &lt;offset-y>" name="&lt;offset-x> &lt;offset-y>"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a></dt>
 <dd>Существуют 2 значения {{ cssxref("&lt;length&gt;") }}, которые устанавливают смещение тени. <code>&lt;offset-x&gt;</code> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <code>&lt;offset-y&gt;</code> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы {{ cssxref("&lt;length&gt;") }} можно задать.<br>
 Если оба значения равны <code>0</code>, то тень расположится за элементом (и будет отображаться размытие, если <code>&lt;blur-radius&gt;</code> и/или <code>&lt;spread-radius&gt;</code> установлены).</dd>
 <dt><a id="&lt;blur-radius>" name="&lt;blur-radius>"><code>&lt;blur-radius&gt;</code></a></dt>
 <dd>Это третье значение {{ cssxref("&lt;length&gt;") }}. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться <code>0</code> (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:</dd>
 <dd>
 <blockquote>…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</blockquote>
 </dd>
 <dt><a id="&lt;spread-radius>" name="&lt;spread-radius>"><code>&lt;spread-radius&gt;</code></a></dt>
 <dd>Это четвёртое значение {{ cssxref("&lt;length&gt;") }}. Положительные значения увеличивают тень, отрицательные - сжимают. По умолчанию значение равно <code>0</code> (размер тени равен размеру элемента).</dd>
 <dt><a id="&lt;color>" name="&lt;color>"><code>&lt;color&gt;</code></a></dt>
 <dd>Смотрите возможные ключевые слова и нотации для {{cssxref("&lt;color&gt;")}}.<br>
 Если не указано, используемый цвет будет зависеть от браузера - обычно будет применено значение свойства {{cssxref("color")}}, но Safari в настоящее время рисует прозрачную тень в этом случае.</dd>
</dl>

<h3 id="Интерполяция">Интерполяция</h3>

<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Примеры">Примеры</h2>

<ul>
 <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">тест box-shadow</a></li>
 <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">примеры и руководство box-shadow</a></li>
 <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">CSS Генератор Box Shadow</a></li>
</ul>

<h2 class="cleared" id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p> </p>



<p>{{Compat("css.properties.box-shadow")}}</p>

<p> </p>

<h2 id="Смотрите_также">Смотрите_также</h2>

<ul>
 <li>Тип данных {{cssxref("&lt;color&gt;")}}</li>
 <li>Другие свойства, относящиеся к цвету: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
 <li><a href="/ru/docs/Web/HTML/Applying_color">Задание цвета HTML-элементам с помощью CSS</a></li>
</ul>