| shadow-inherit | —tw-shadow-color: inherit; |
| shadow-current | —tw-shadow-color: currentColor; |
| shadow-transparent | —tw-shadow-color: transparent; |
| shadow-black | —tw-shadow-color: #000; |
| shadow-white | —tw-shadow-color: #fff; |
| shadow-slate-50 | —tw-shadow-color: #f8fafc; |
| shadow-slate-100 | —tw-shadow-color: #f1f5f9; |
| shadow-slate-200 | —tw-shadow-color: #e2e8f0; |
| shadow-slate-300 | —tw-shadow-color: #cbd5e1; |
| shadow-slate-400 | —tw-shadow-color: #94a3b8; |
| shadow-slate-500 | —tw-shadow-color: #64748b; |
| shadow-slate-600 | —tw-shadow-color: #475569; |
| shadow-slate-700 | —tw-shadow-color: #334155; |
| shadow-slate-800 | —tw-shadow-color: #1e293b; |
| shadow-slate-900 | —tw-shadow-color: #0f172a; |
| shadow-slate-950 | —tw-shadow-color: #020617; |
| shadow-gray-50 | —tw-shadow-color: #f9fafb; |
| —tw-shadow-color: #f3f4f6; | |
| shadow-gray-200 | —tw-shadow-color: #e5e7eb; |
| shadow-gray-300 | —tw-shadow-color: #d1d5db; |
| shadow-gray-400 | —tw-shadow-color: #9ca3af; |
| shadow-gray-500 | —tw-shadow-color: #6b7280; |
| shadow-gray-600 | —tw-shadow-color: #4b5563; |
| shadow-gray-700 | —tw-shadow-color: #374151; |
| shadow-gray-800 | —tw-shadow-color: #1f2937; |
| shadow-gray-900 | —tw-shadow-color: #111827; |
| shadow-gray-950 | —tw-shadow-color: #030712; |
| shadow-zinc-50 | —tw-shadow-color: #fafafa; |
| shadow-zinc-100 | —tw-shadow-color: #f4f4f5; |
| shadow-zinc-200 | —tw-shadow-color: #e4e4e7; |
| shadow-zinc-300 | —tw-shadow-color: #d4d4d8; |
| shadow-zinc-400 | —tw-shadow-color: #a1a1aa; |
| shadow-zinc-500 | —tw-shadow-color: #71717a; |
| shadow-zinc-600 | —tw-shadow-color: #52525b; |
| shadow-zinc-700 | —tw-shadow-color: #3f3f46; |
| shadow-zinc-800 | —tw-shadow-color: #27272a; |
| shadow-zinc-900 | —tw-shadow-color: #18181b; |
| shadow-zinc-950 | —tw-shadow-color: #09090b; |
| shadow-neutral-50 | —tw-shadow-color: #fafafa; |
| shadow-neutral-100 | —tw-shadow-color: #f5f5f5; |
| shadow-neutral-200 | —tw-shadow-color: #e5e5e5; |
| shadow-neutral-300 | —tw-shadow-color: #d4d4d4; |
| shadow-neutral-400 | —tw-shadow-color: #a3a3a3; |
| shadow-neutral-500 | —tw-shadow-color: #737373; |
| shadow-neutral-600 | —tw-shadow-color: #525252; |
| shadow-neutral-700 | |
| shadow-neutral-800 | —tw-shadow-color: #262626; |
| shadow-neutral-900 | —tw-shadow-color: #171717; |
| shadow-neutral-950 | —tw-shadow-color: #0a0a0a; |
| shadow-stone-50 | —tw-shadow-color: #fafaf9; |
| shadow-stone-100 | —tw-shadow-color: #f5f5f4; |
| shadow-stone-200 | —tw-shadow-color: #e7e5e4; |
| shadow-stone-300 | —tw-shadow-color: #d6d3d1; |
| shadow-stone-400 | —tw-shadow-color: #a8a29e; |
| shadow-stone-500 | —tw-shadow-color: #78716c; |
| shadow-stone-600 | —tw-shadow-color: #57534e; |
| shadow-stone-700 | —tw-shadow-color: #44403c; |
| shadow-stone-800 | —tw-shadow-color: #292524; |
| shadow-stone-900 | —tw-shadow-color: #1c1917; |
| shadow-stone-950 | —tw-shadow-color: #0c0a09; |
| shadow-red-50 | —tw-shadow-color: #fef2f2; |
| shadow-red-100 | —tw-shadow-color: #fee2e2; |
| shadow-red-200 | —tw-shadow-color: #fecaca; |
| shadow-red-300 | —tw-shadow-color: #fca5a5; |
| shadow-red-400 | —tw-shadow-color: #f87171; |
| shadow-red-500 | —tw-shadow-color: #ef4444; |
| shadow-red-600 | —tw-shadow-color: #dc2626; |
| shadow-red-700 | —tw-shadow-color: #b91c1c; |
| shadow-red-800 | —tw-shadow-color: #991b1b; |
| shadow-red-900 | —tw-shadow-color: #7f1d1d; |
| shadow-red-950 | —tw-shadow-color: #450a0a; |
| shadow-orange-50 | —tw-shadow-color: #fff7ed; |
| shadow-orange-100 | —tw-shadow-color: #ffedd5; |
| shadow-orange-200 | —tw-shadow-color: #fed7aa; |
| shadow-orange-300 | —tw-shadow-color: #fdba74; |
| shadow-orange-400 | —tw-shadow-color: #fb923c; |
| shadow-orange-500 | —tw-shadow-color: #f97316; |
| shadow-orange-600 | —tw-shadow-color: #ea580c; |
| shadow-orange-700 | —tw-shadow-color: #c2410c; |
| shadow-orange-800 | —tw-shadow-color: #9a3412; |
| shadow-orange-900 | —tw-shadow-color: #7c2d12; |
| shadow-orange-950 | —tw-shadow-color: #431407; |
| shadow-amber-50 | —tw-shadow-color: #fffbeb; |
| shadow-amber-100 | —tw-shadow-color: #fef3c7; |
| shadow-amber-200 | —tw-shadow-color: #fde68a; |
| shadow-amber-300 | —tw-shadow-color: #fcd34d; |
| shadow-amber-400 | —tw-shadow-color: #fbbf24; |
| shadow-amber-500 | —tw-shadow-color: #f59e0b; |
| shadow-amber-600 | |
| shadow-amber-700 | —tw-shadow-color: #b45309; |
| shadow-amber-800 | —tw-shadow-color: #92400e; |
| shadow-amber-900 | —tw-shadow-color: #78350f; |
| shadow-amber-950 | —tw-shadow-color: #451a03; |
| shadow-yellow-50 | —tw-shadow-color: #fefce8; |
| shadow-yellow-100 | —tw-shadow-color: #fef9c3; |
| shadow-yellow-200 | —tw-shadow-color: #fef08a; |
| shadow-yellow-300 | —tw-shadow-color: #fde047; |
| shadow-yellow-400 | —tw-shadow-color: #facc15; |
| shadow-yellow-500 | —tw-shadow-color: #eab308; |
| shadow-yellow-600 | —tw-shadow-color: #ca8a04; |
| shadow-yellow-700 | —tw-shadow-color: #a16207; |
| shadow-yellow-800 | —tw-shadow-color: #854d0e; |
| shadow-yellow-900 | —tw-shadow-color: #713f12; |
| shadow-yellow-950 | —tw-shadow-color: #422006; |
| shadow-lime-50 | —tw-shadow-color: #f7fee7; |
| shadow-lime-100 | —tw-shadow-color: #ecfccb; |
| shadow-lime-200 | —tw-shadow-color: #d9f99d; |
| shadow-lime-300 | —tw-shadow-color: #bef264; |
| shadow-lime-400 | —tw-shadow-color: #a3e635; |
| shadow-lime-500 | —tw-shadow-color: #84cc16; |
| shadow-lime-600 | —tw-shadow-color: #65a30d; |
| shadow-lime-700 | —tw-shadow-color: #4d7c0f; |
| shadow-lime-800 | —tw-shadow-color: #3f6212; |
| shadow-lime-900 | —tw-shadow-color: #365314; |
| shadow-lime-950 | —tw-shadow-color: #1a2e05; |
| shadow-green-50 | —tw-shadow-color: #f0fdf4; |
| shadow-green-100 | —tw-shadow-color: #dcfce7; |
| shadow-green-200 | —tw-shadow-color: #bbf7d0; |
| shadow-green-300 | —tw-shadow-color: #86efac; |
| shadow-green-400 | —tw-shadow-color: #4ade80; |
| shadow-green-500 | —tw-shadow-color: #22c55e; |
| shadow-green-600 | —tw-shadow-color: #16a34a; |
| shadow-green-700 | —tw-shadow-color: #15803d; |
| shadow-green-800 | —tw-shadow-color: #166534; |
| shadow-green-900 | —tw-shadow-color: #14532d; |
| shadow-green-950 | —tw-shadow-color: #052e16; |
| shadow-emerald-50 | —tw-shadow-color: #ecfdf5; |
| shadow-emerald-100 | —tw-shadow-color: #d1fae5; |
| shadow-emerald-200 | —tw-shadow-color: #a7f3d0; |
| shadow-emerald-300 | —tw-shadow-color: #6ee7b7; |
| shadow-emerald-400 | —tw-shadow-color: #34d399; |
| shadow-emerald-500 | —tw-shadow-color: #10b981; |
| shadow-emerald-600 | —tw-shadow-color: #059669; |
| shadow-emerald-700 | —tw-shadow-color: #047857; |
| shadow-emerald-800 | —tw-shadow-color: #065f46; |
| shadow-emerald-900 | —tw-shadow-color: #064e3b; |
| shadow-emerald-950 | —tw-shadow-color: #022c22; |
| shadow-teal-50 | —tw-shadow-color: #f0fdfa; |
| shadow-teal-100 | —tw-shadow-color: #ccfbf1; |
| shadow-teal-200 | —tw-shadow-color: #99f6e4; |
| shadow-teal-300 | —tw-shadow-color: #5eead4; |
| shadow-teal-400 | —tw-shadow-color: #2dd4bf; |
| shadow-teal-500 | —tw-shadow-color: #14b8a6; |
| shadow-teal-600 | —tw-shadow-color: #0d9488; |
| shadow-teal-700 | —tw-shadow-color: #0f766e; |
| shadow-teal-800 | —tw-shadow-color: #115e59; |
| shadow-teal-900 | —tw-shadow-color: #134e4a; |
| shadow-teal-950 | —tw-shadow-color: #042f2e; |
| shadow-cyan-50 | —tw-shadow-color: #ecfeff; |
| shadow-cyan-100 | —tw-shadow-color: #cffafe; |
| shadow-cyan-200 | —tw-shadow-color: #a5f3fc; |
| shadow-cyan-300 | —tw-shadow-color: #67e8f9; |
| shadow-cyan-400 | —tw-shadow-color: #22d3ee; |
| shadow-cyan-500 | —tw-shadow-color: #06b6d4; |
| shadow-cyan-600 | —tw-shadow-color: #0891b2; |
| shadow-cyan-700 | —tw-shadow-color: #0e7490; |
| shadow-cyan-800 | —tw-shadow-color: #155e75; |
| shadow-cyan-900 | —tw-shadow-color: #164e63; |
| shadow-cyan-950 | —tw-shadow-color: #083344; |
| shadow-sky-50 | —tw-shadow-color: #f0f9ff; |
| shadow-sky-100 | —tw-shadow-color: #e0f2fe; |
| shadow-sky-200 | —tw-shadow-color: #bae6fd; |
| shadow-sky-300 | —tw-shadow-color: #7dd3fc; |
| shadow-sky-400 | —tw-shadow-color: #38bdf8; |
| shadow-sky-500 | —tw-shadow-color: #0ea5e9; |
| shadow-sky-600 | —tw-shadow-color: #0284c7; |
| shadow-sky-700 | —tw-shadow-color: #0369a1; |
| shadow-sky-800 | —tw-shadow-color: #075985; |
| shadow-sky-900 | —tw-shadow-color: #0c4a6e; |
| shadow-sky-950 | —tw-shadow-color: #082f49; |
| shadow-blue-50 | —tw-shadow-color: #eff6ff; |
| shadow-blue-100 | —tw-shadow-color: #dbeafe; |
| shadow-blue-200 | —tw-shadow-color: #bfdbfe; |
| shadow-blue-300 | —tw-shadow-color: #93c5fd; |
| shadow-blue-400 | —tw-shadow-color: #60a5fa; |
| shadow-blue-500 | —tw-shadow-color: #3b82f6; |
| shadow-blue-600 | —tw-shadow-color: #2563eb; |
| shadow-blue-700 | —tw-shadow-color: #1d4ed8; |
| shadow-blue-800 | —tw-shadow-color: #1e40af; |
| shadow-blue-900 | —tw-shadow-color: #1e3a8a; |
| shadow-blue-950 | —tw-shadow-color: #172554; |
| shadow-indigo-50 | —tw-shadow-color: #eef2ff; |
| shadow-indigo-100 | —tw-shadow-color: #e0e7ff; |
| shadow-indigo-200 | —tw-shadow-color: #c7d2fe; |
| shadow-indigo-300 | —tw-shadow-color: #a5b4fc; |
| shadow-indigo-400 | —tw-shadow-color: #818cf8; |
| shadow-indigo-500 | —tw-shadow-color: #6366f1; |
| shadow-indigo-600 | —tw-shadow-color: #4f46e5; |
| shadow-indigo-700 | —tw-shadow-color: #4338ca; |
| shadow-indigo-800 | —tw-shadow-color: #3730a3; |
| shadow-indigo-900 | —tw-shadow-color: #312e81; |
| shadow-indigo-950 | —tw-shadow-color: #1e1b4b; |
| shadow-violet-50 | —tw-shadow-color: #f5f3ff; |
| shadow-violet-100 | —tw-shadow-color: #ede9fe; |
| shadow-violet-200 | —tw-shadow-color: #ddd6fe; |
| shadow-violet-300 | —tw-shadow-color: #c4b5fd; |
| shadow-violet-400 | —tw-shadow-color: #a78bfa; |
| shadow-violet-500 | —tw-shadow-color: #8b5cf6; |
| shadow-violet-600 | —tw-shadow-color: #7c3aed; |
| shadow-violet-700 | —tw-shadow-color: #6d28d9; |
| shadow-violet-800 | —tw-shadow-color: #5b21b6; |
| shadow-violet-900 | —tw-shadow-color: #4c1d95; |
| shadow-violet-950 | —tw-shadow-color: #2e1065; |
| shadow-purple-50 | —tw-shadow-color: #faf5ff; |
| shadow-purple-100 | —tw-shadow-color: #f3e8ff; |
| shadow-purple-200 | —tw-shadow-color: #e9d5ff; |
| shadow-purple-300 | —tw-shadow-color: #d8b4fe; |
| shadow-purple-400 | —tw-shadow-color: #c084fc; |
| shadow-purple-500 | —tw-shadow-color: #a855f7; |
| shadow-purple-600 | —tw-shadow-color: #9333ea; |
| shadow-purple-700 | —tw-shadow-color: #7e22ce; |
| shadow-purple-800 | —tw-shadow-color: #6b21a8; |
| shadow-purple-900 | —tw-shadow-color: #581c87; |
| shadow-purple-950 | —tw-shadow-color: #3b0764; |
| shadow-fuchsia-50 | —tw-shadow-color: #fdf4ff; |
| shadow-fuchsia-100 | —tw-shadow-color: #fae8ff; |
| shadow-fuchsia-200 | —tw-shadow-color: #f5d0fe; |
| shadow-fuchsia-300 | —tw-shadow-color: #f0abfc; |
| shadow-fuchsia-400 | —tw-shadow-color: #e879f9; |
| shadow-fuchsia-500 | —tw-shadow-color: #d946ef; |
| shadow-fuchsia-600 | —tw-shadow-color: #c026d3; |
| shadow-fuchsia-700 | —tw-shadow-color: #a21caf; |
| shadow-fuchsia-800 | —tw-shadow-color: #86198f; |
| shadow-fuchsia-900 | —tw-shadow-color: #701a75; |
| shadow-fuchsia-950 | —tw-shadow-color: #4a044e; |
| shadow-pink-50 | —tw-shadow-color: #fdf2f8; |
| shadow-pink-100 | —tw-shadow-color: #fce7f3; |
| shadow-pink-200 | —tw-shadow-color: #fbcfe8; |
| shadow-pink-300 | —tw-shadow-color: #f9a8d4; |
| shadow-pink-400 | —tw-shadow-color: #f472b6; |
| shadow-pink-500 | —tw-shadow-color: #ec4899; |
| shadow-pink-600 | —tw-shadow-color: #db2777; |
| shadow-pink-700 | —tw-shadow-color: #be185d; |
| shadow-pink-800 | —tw-shadow-color: #9d174d; |
| shadow-pink-900 | —tw-shadow-color: #831843; |
| shadow-pink-950 | —tw-shadow-color: #500724; |
| shadow-rose-50 | —tw-shadow-color: #fff1f2; |
| shadow-rose-100 | —tw-shadow-color: #ffe4e6; |
| shadow-rose-200 | —tw-shadow-color: #fecdd3; |
| shadow-rose-300 | —tw-shadow-color: #fda4af; |
| shadow-rose-400 | —tw-shadow-color: #fb7185; |
| shadow-rose-500 | —tw-shadow-color: #f43f5e; |
| shadow-rose-600 | —tw-shadow-color: #e11d48; |
| shadow-rose-700 | —tw-shadow-color: #be123c; |
| shadow-rose-800 | —tw-shadow-color: #9f1239; |
| shadow-rose-900 | —tw-shadow-color: #881337; |
| shadow-rose-950 | —tw-shadow-color: #4c0519; |
Функция drop-shadow() в CSS
Используйте функцию drop-shadow() , чтобы применить эффект тени к изображению.
Функция CSS drop-shadow() используется со свойством filter для добавления эффекта тени к изображению.
Падающая тень — это (обычно) размытая, смещенная версия альфа-маски входного изображения, нарисованная определенным цветом и наложенная под изображением.
Функция CSS drop-shadow() принимает несколько аргументов, определяющих смещение тени, ее размытие и цвет.
Базовый пример
Вот пример простой тени:
Другие эффекты
Ваши тени не всегда должны иметь смещение. Например, вы можете использовать функцию drop-shadow() для создания свечения вокруг изображения.
Для этого просто установите аргументы смещения равными 0 . Вот так:
Большинство теней обычно имеют размытые края, но ничто не мешает вам иметь острые края. Для этого просто установите аргумент размытия равным 9.0003 0 :
Официальный синтаксис
Официальный синтаксис функции drop-shadow() выглядит следующим образом:
drop-shadow() = drop-shadow(
Возможные значения
Функция drop-shadow() принимает значений длины и необязательное значение цвета в качестве аргументов.
Аргументы определяют горизонтальное и вертикальное смещение тени, степень размытия и ее цвет.
&& указывает, что порядок значений и может быть изменен (т. е. у вас есть возможность указать цвет первым или последним).
Вот объяснение каждого значения:
- <цвет>? (опционально)
- Это значение определяет цвет тени. Это может быть любое допустимое значение
. Например,steelblue,#FF4500илиrgba(0,0,0,0.3)— все допустимые цвета. Если это значение не указано, оно будет взято из свойстваcolor. - <длина>{2,3}
Это может быть два или три значения, как указано ниже:
- <смещение по горизонтали> (обязательно)
- Определяет горизонтальное смещение тени. Это значение длины. Например,
10pxили1em.
Допускаются отрицательные значения. Если указано отрицательное значение, смещение приведет к тому, что тень будет отрисована слева от поля. Если это положительное значение, оно будет нарисовано вправо. - <смещение по вертикали> (обязательно)
- Определяет вертикальное смещение тени. Это значение длины. Например,
10pxили1em. Допускаются отрицательные значения. Если указано отрицательное значение, смещение приведет к тому, что тень будет нарисована над блоком. Если это положительное значение, оно будет нарисовано ниже. - <размытие> (опционально)
- Определяет эффект размытия по Гауссу (если есть). Если значение равно нулю (т.е.
0), край тени будет резким. Чем выше значение, тем более размытой станет тень. Отрицательные значения не допускаются для размытия по Гауссу.
Технические характеристики CSS
- Функция
drop-shadow()определена в модуле эффектов фильтра уровня 1 (рабочий проект W3C)
Поддержка браузера
В следующей таблице, предоставленной Caniuse.
com, показан уровень поддержки этой функции браузерами.
24 Эффекты теней для текста CSS
Коллекция отобранных вручную бесплатных HTML и CSS эффектов теней для текста примеров кода из Codepen, GitHub и других ресурсов. Обновление октябрьской коллекции 2021 года. 4 новых предмета.
- Текстовые эффекты CSS
- Текстовые эффекты набора текста CSS
- CSS box-shadow Примеры
О коде
Увеличенный размер шрифта, увеличенная тень текста
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Контурная тень текста с откатом
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Текстовый эффект тени CSS
Эффект тени фона текста CSS с использованием атрибута содержимого.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Причудливая тень для текста в стиле ретро
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
СОХРАНИТЬ
Причудливый CSS-баннер с использованием box-shadow s.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Всплывающий текст с тенью фонового изображения
Вырезание текста из фона, а затем его «всплывающее окно», аналогично тому, как можно использовать тень текста. На самом деле, здесь используется тень текста!
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Мультипликационный 3D-текст с тенью текста CSS
Играем с CSS text-shadow и шрифтом Google «Luckiest Guy».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
SCSS 3D Text Mixin
Это простой миксин SCSS, который создает трехмерный блочный текст с текстовыми тенями .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Анимированный текст-тень
Забавная анимация CSS, которая создает отскок, имитируя разделение RGB во время процесса.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Текстовая тень с учетом направления
Direction-aware text-shadow , использование переменных CSS для создания эффекта перспективы и трехмерного освещения текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Эффект Groovy CSS
Эффект шрифта 1960-х годов с использованием CSS свойство text-shadow вместе с функцией SASS и примесями, чтобы сохранить код СУХИМ.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Текстовая анимация в стиле Netflix с помощью CSS
Текстовая анимация в стиле Netflix с CSS и функцией SCSS для создания длинной тени текста .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Причудливая тень текста
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Текстовая тень CSS
Современный эффект тени для текста с помощью CSS text-shadow .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Демонстрационное изображение: Затененный текстЗатененный текст
Затененный текст, эксперимент SVG + CSS3 с анимированными тенями. Он не оптимизирован для мобильных устройств.
.. пока.
Сделано Рафаэлем Гонсалесом
16 сентября 2016 г.
скачать демо и код
О коде
Симпатичная тень
Красивая тень текста.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Variable Longshadow with Gradient Mixin
Этого не должно быть. Но теперь вы можете определить длинные тени с разными цветами и разбросами с помощью одного миксина Sass.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Неоновые эффекты
Неон текст-тень эффекты.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Pinchy Type с тенью текста CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Потрясающая тень текста
Плоский и простой эффект тени текста.

Допускаются отрицательные значения. Если указано отрицательное значение, смещение приведет к тому, что тень будет отрисована слева от поля. Если это положительное значение, оно будет нарисовано вправо.