Текст с тенями

И с градиентом!

Текст голубой с красной-тенью обводкой, текст прозрачный с красной обводкой, текст с градиентным цветом от синего к зеленому по диагонали

Как сделать на css обводку текста?

➡️ Итак, один из способов: задать тень (text-shadow), причем тени задаем с каждой стороны

text-shadow: 1px 0 1px #000,

    0 1px 1px #000,

   -1px 0 1px #000,

   0 -1px 1px #000;

Удобно, если у текста несколько обводок, например:

text-shadow:

  -2px 0 red,

  0 2px violet,

  2px 0 red,

  0 -2px blue;

❗️Однако, если нужно, чтобы текст при этом был прозрачным, то

color: transparent; при наличии text-shadow работать не будет, в этом случае, используйте стили:

  -webkit-text-stroke-width: 2px;

  -webkit-text-stroke-color: red;

  -webkit-text-fill-color: transparent;

➡️ И бонус: градиентный текст(может поддерживаться не всеми браузерами):

  color: transparent;

  -webkit-background-clip: text;

  background-clip: text;

  background-image: linear-gradient(to bottom right, darkblue, lightgreen, orange);

🔗 Посмотреть примеры в codepen

#css #обводка_текста