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
Ответ: да
Зависимости: —
О коде
Потрясающая тень текста
Плоский и простой эффект тени текста.