Тени и градиенты

Тени добавляют интерфейсу глубину: карточка будто приподнята над страницей, кнопка — над фоном. Градиент — плавный переход между цветами — заменяет фоновые картинки. И то и другое рисует сам браузер, без файлов изображений.

Тень блока

box-shadow принимает сдвиг по горизонтали, сдвиг по вертикали, размытие и цвет:

<style>
  .card { width: 200px; padding: 16px; margin: 8px; background: white; box-shadow: 4px 6px 12px gray; }
</style>
 
<div class="card">Тень сдвинута вправо и вниз</div>

Мягкая тень получается при небольшом сдвиге, сильном размытии и полупрозрачном цвете: 0 4px 16px rgb(0 0 0 / 0.15).

Параметры тени

Часть	Пример	Смысл
Сдвиг X	`4px`	Вправо; отрицательное — влево
Сдвиг Y	`6px`	Вниз; отрицательное — вверх
Размытие	`12px`	Чем больше, тем мягче край
Растяжение	`2px`	Увеличивает тень во все стороны, необязательно
`inset`	`inset 0 2px 4px gray`	Тень внутри блока

Несколько теней перечисляют через запятую:

<style>
  .box { display: inline-block; padding: 16px; margin: 12px; background: white; }
  .soft { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.15); }
  .inner { box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.3); }
</style>
 
<div class="box soft">Две тени</div>
<div class="box inner">Внутренняя</div>

Тень текста

text-shadow устроена так же, но без растяжения и inset:

<style>
  .title { font-size: 32px; font-weight: bold; color: white; background: steelblue; padding: 8px; text-shadow: 2px 2px 4px black; }
</style>
 
<p class="title">Заголовок с тенью</p>

Линейный градиент

Градиент — это фоновое изображение, поэтому его пишут в background. linear-gradient() переходит от цвета к цвету по прямой. Первым можно указать направление: to right или угол в градусах:

<style>
  .g { height: 50px; margin-bottom: 8px; }
  .down { background: linear-gradient(gold, tomato); }
  .right { background: linear-gradient(to right, lightskyblue, mediumpurple); }
  .angle { background: linear-gradient(45deg, seagreen, gold); }
</style>
 
<div class="g down"></div>
<div class="g right"></div>
<div class="g angle"></div>

Без направления градиент идёт сверху вниз.

Точки цвета и радиальный градиент

После цвета можно указать, где он стоит: gold 30%. Два цвета в одной точке дают резкую границу вместо плавной. radial-gradient() расходится кругами из центра:

<style>
  .g { display: inline-block; width: 140px; height: 90px; margin: 4px; }
  .stops { background: linear-gradient(to right, crimson 50%, gold 50%); }
  .radial { background: radial-gradient(circle, white, steelblue); }
</style>
 
<div class="g stops"></div>
<div class="g radial"></div>

Частая ошибка

Градиент — не цвет, а изображение. В background-color он не работает, и браузер молча отбрасывает правило:

<style>
  .box { height: 50px; margin-bottom: 8px; border: 1px solid gray; }
  .bad { background-color: linear-gradient(gold, tomato); }
  .good { background-image: linear-gradient(gold, tomato); }
</style>
 
<div class="box bad"></div>
<div class="box good"></div>

Пишите градиент в background или background-image.

Спасибо, что читаете!