Css тень текста генератор

Тень текста

Красная тень
Зеленая тень
Синяя тень

Готовый код текста CSS


Css тень текста генератор

Задание тени тексту может понадобится для добавления акцента тексту для читателя. Во вторых это красивый эффект контраста тени и фона лендинга. Разберем подробно как сделать тень текста css генератором.

  1. Зададим цвет тени в формате RGB.
  2. Добавим отступы тени от текста.
  3. Размоем тень.
  4. Установим прозрачность от 0.0 до 1.0.
  5. Зададим направление тени от 0 до 359 градусов по кругу.

Копируем в буфер готовый код тени CSS.


css тень текста генератор

Читать как сделать неоновый, 3д, прозрачный и выпуклый текст читать тут.


Красивые примеры css тень текста

Рассмотрим несколько примеров тени.


3D тени у текста


CSS тень текста

Код 3D тень у текста

.text-shadow {
color: #b641b0;
text-shadow:0px 0px 0 rgb(116,14,116),-1px 1px 0 rgb(109,7,109),
-2px 2px 0 rgb(101,-1,101),-3px 3px 0 rgb(94,-8,94),-4px 4px 0 rgb(86,-16,86),
-5px 5px 0 rgb(78,-24,78),-6px 6px 0 rgb(71,-31,71),-7px 7px 0 rgb(63,-39,63),
-8px 8px 0 rgb(55,-47,55),-9px 9px 0 rgb(48,-54,48),-10px 10px 0 rgb(40,-62,40),
-11px 11px 0 rgb(33,-69,33),-12px 12px 0 rgb(25,-77,25), -13px 13px 0 rgb(17,-85,17),
-14px 14px 13px rgba(0,0,0,0.25),-14px 14px 1px rgba(0,0,0,0.5),0px 0px 13px rgba(0,0,0,.2);
}


Прозрачная тень текста css

Прозрачная

Код прозрачной тени

.text-shadow {
background: MistyRose;
color: transparent;
text-shadow: 5px -5px rgba(157, 215, 227, .7),
-2px -2px rgba(159, 139, 105, .7),
0 2px rgba(254, 216, 21, .7);
}

Неоновая тень текста css

Неоновая

Код неоновой тени

.text-shadow {
color:white;
text-shadow:0 0 11px #fff, 0 0 22px #00d2ff,
0 0 33px #00d2ff, 0 0 44px #00d2ff, 0 0 55px #00d2ff,
0 0 66px #00d2ff, 0 0 77px #00d2ff;
}

Выпуклая тень CSS текста

Выпуклая

Код выпуклой тени

.text-shadow {
background:SaddleBrown;
color:SaddleBrown;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.6);
}

Тень текста радуга

Радужнаяf

Код радужной тени

.text-shadow {
color:Crimson;
text-shadow: 1px 1px Salmon, 2px 2px Salmon, 3px 3px Salmon, 4px 4px Salmon, 5px 5px Salmon,
6px 6px OrangeRed, 7px 7px OrangeRed, 8px 8px OrangeRed, 9px 9px OrangeRed, 10px 10px OrangeRed,
11px 11px Yellow, 12px 12px Yellow, 13px 13px Yellow, 14px 14px Yellow, 15px 15px Yellow,
16px 16px SpringGreen, 17px 17px SpringGreen, 18px 18px SpringGreen, 19px 19px SpringGreen, 20px 20px SpringGreen,
21px 21px Cyan, 22px 22px Cyan, 23px 23px Cyan, 24px 24px Cyan, 25px 25px Cyan;
}

Вырезаная тень текста css

Вырезанная

Код вырезанной тени css

.text-shadow {
color: transparent;
background-color: SlateGray; -webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Обтекаемая css тень текста

Обтекаемая

Код обтекаемой тени текста

.text-shadow {
text-shadow: 0 2px 2px rgba(0, 0, 30, 0.6);
color: rgba(102, 0, 102, 0.5);
}

Тень текста css из двух цветов

Два цвета

Код тени текста два цвета

.text-shadow {
text-shadow: 3px 3px 10px Fuchsia,
-3px -3px 10px DeepSkyBlue;
color: MidnightBlue;
}

Ретро тень css

Ретро стиль

Код ретро тени текста

.text-shadow {
color: PeachPuff;
text-shadow: 5px 5px 0px DarkOrange,
7px 7px 0px Tomato;
}

Огненная тень текста css

Огненная

Код огненной тени текста

.text-shadow {
background-color: DimGray;
color: LightYellow;
text-shadow: 0 0 20px #fefcc8,
10px -10px 30px #feec86,
-20px -20px 40px #ffae35,
20px -40px 50px #ec750c,
-20px -60px 60px #cd4806,
0 -80px 70px #973717,
10px -90px 80px #452b0e;
}

Слоеная тень текста

Слоеная тень

Код слоенной тени текста css

.text-shadow {
color: Purple;
text-shadow: 0 1px 0 DarkOliveGreen,
0 2px 0 DarkOrchid,
0 3px 0 LightSalmon,
0 4px 0 Aquamarine,
0 5px 0 Magenta,
0 6px 0 Goldenrod,
0 7px 0 Brown,
0 8px 7px LightSeaGreen;
}