tailwindcss-effects

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tailwind CSS v4.1 Effects

Tailwind CSS v4.1 效果工具类

Effects utilities to add shadows, filters, masks and visual effects to elements.

用于为元素添加阴影、滤镜、遮罩及各类视觉效果的工具类。

Box Shadow

盒子阴影

Shadows Standard

标准阴影

html

<!-- Preset shadows -->
<div class="shadow-none">No shadow</div>
<div class="shadow-xs">Extra small shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Base shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">2XL shadow</div>

html

<!-- 预设阴影 -->
<div class="shadow-none">无阴影</div>
<div class="shadow-xs">超小阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow">基础阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">大阴影</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">2XL 阴影</div>

Shadow Color (v4.1 NEW)

阴影颜色（v4.1 新增）

html

<!-- Custom shadow colors -->
<div class="shadow-sm shadow-red-500">Red tinted shadow</div>
<div class="shadow shadow-blue-400">Blue tinted shadow</div>
<div class="shadow-lg shadow-purple-500/50">Purple shadow with opacity</div>

html

<!-- 自定义阴影颜色 -->
<div class="shadow-sm shadow-red-500">红色调阴影</div>
<div class="shadow shadow-blue-400">蓝色调阴影</div>
<div class="shadow-lg shadow-purple-500/50">带透明度的紫色阴影</div>

Inset Shadow (v4.1 NEW)

内阴影（v4.1 新增）

html

<!-- Inner shadows -->
<div class="inset-shadow-sm">Inset small shadow</div>
<div class="inset-shadow">Inset base shadow</div>
<div class="inset-shadow-lg">Inset large shadow</div>
<div class="inset-shadow-lg inset-shadow-blue-500">Inset shadow with color</div>

html

<!-- 内部阴影 -->
<div class="inset-shadow-sm">内部小阴影</div>
<div class="inset-shadow">内部基础阴影</div>
<div class="inset-shadow-lg">内部大阴影</div>
<div class="inset-shadow-lg inset-shadow-blue-500">带颜色的内部阴影</div>

Arbitrary Shadow Values

自定义阴影值

html

<div class="shadow-[0_4px_12px_rgba(0,0,0,0.3)]">Custom shadow</div>
<div class="shadow-[inset_0_1px_3px_0_rgba(0,0,0,0.1)]">Custom inset</div>

html

<div class="shadow-[0_4px_12px_rgba(0,0,0,0.3)]">自定义阴影</div>
<div class="shadow-[inset_0_1px_3px_0_rgba(0,0,0,0.1)]">自定义内阴影</div>

Opacity

透明度

Opacity Utilities

透明度工具类

html

<!-- Opacity scale 0-100% -->
<div class="opacity-0">Fully transparent</div>
<div class="opacity-25">25% opacity</div>
<div class="opacity-50">50% opacity</div>
<div class="opacity-75">75% opacity</div>
<div class="opacity-100">Fully opaque</div>

html

<!-- 透明度范围 0-100% -->
<div class="opacity-0">完全透明</div>
<div class="opacity-25">25% 透明度</div>
<div class="opacity-50">50% 透明度</div>
<div class="opacity-75">75% 透明度</div>
<div class="opacity-100">完全不透明</div>

Opacity with Colors

颜色结合透明度

html

<!-- Shorthand opacity in color values -->
<div class="bg-red-500/50">Red with 50% opacity</div>
<div class="text-blue-600/75">Text with 75% opacity</div>
<div class="border-gray-400/25">Border with 25% opacity</div>
<div class="shadow-lg shadow-black/30">Shadow with 30% opacity</div>

html

<!-- 颜色值中简写透明度 -->
<div class="bg-red-500/50">50% 透明度的红色背景</div>
<div class="text-blue-600/75">75% 透明度的蓝色文字</div>
<div class="border-gray-400/25">25% 透明度的灰色边框</div>
<div class="shadow-lg shadow-black/30">30% 透明度的黑色阴影</div>

Filters

滤镜

Blur

模糊

html

<div class="blur-none">No blur</div>
<div class="blur-sm">Small blur (4px)</div>
<div class="blur">Base blur (12px)</div>
<div class="blur-md">Medium blur (16px)</div>
<div class="blur-lg">Large blur (24px)</div>
<div class="blur-xl">Extra large blur (40px)</div>
<div class="blur-2xl">2XL blur (64px)</div>

<!-- Arbitrary -->
<div class="blur-[8px]">Custom blur 8px</div>

html

<div class="blur-none">无模糊</div>
<div class="blur-sm">小模糊（4px）</div>
<div class="blur">基础模糊（12px）</div>
<div class="blur-md">中等模糊（16px）</div>
<div class="blur-lg">大模糊（24px）</div>
<div class="blur-xl">超大模糊（40px）</div>
<div class="blur-2xl">2XL 模糊（64px）</div>

<!-- 自定义值 -->
<div class="blur-[8px]">自定义8px模糊</div>

Brightness

亮度

html

<div class="brightness-50">Darken to 50%</div>
<div class="brightness-75">Darken to 75%</div>
<div class="brightness-100">Normal (100%)</div>
<div class="brightness-125">Brighten to 125%</div>
<div class="brightness-150">Brighten to 150%</div>
<div class="brightness-200">Brighten to 200%</div>

html

<div class="brightness-50">调暗至50%</div>
<div class="brightness-75">调暗至75%</div>
<div class="brightness-100">正常亮度（100%）</div>
<div class="brightness-125">调亮至125%</div>
<div class="brightness-150">调亮至150%</div>
<div class="brightness-200">调亮至200%</div>

Contrast

对比度

html

<div class="contrast-50">Reduce contrast 50%</div>
<div class="contrast-75">Reduce contrast 75%</div>
<div class="contrast-100">Normal contrast (100%)</div>
<div class="contrast-125">Increase contrast 125%</div>
<div class="contrast-150">Increase contrast 150%</div>
<div class="contrast-200">Increase contrast 200%</div>

html

<div class="contrast-50">降低对比度至50%</div>
<div class="contrast-75">降低对比度至75%</div>
<div class="contrast-100">正常对比度（100%）</div>
<div class="contrast-125">提高对比度至125%</div>
<div class="contrast-150">提高对比度至150%</div>
<div class="contrast-200">提高对比度至200%</div>

Grayscale

灰度

html

<div class="grayscale-0">No grayscale</div>
<div class="grayscale">Full grayscale (100%)</div>

<!-- Arbitrary -->
<div class="grayscale-[50%]">50% grayscale</div>

html

<div class="grayscale-0">无灰度</div>
<div class="grayscale">全灰度（100%）</div>

<!-- 自定义值 -->
<div class="grayscale-[50%]">50% 灰度</div>

Sepia

深褐色

html

<div class="sepia-0">No sepia</div>
<div class="sepia">Full sepia (100%)</div>

<!-- Arbitrary -->
<div class="sepia-[75%]">75% sepia</div>

html

<div class="sepia-0">无深褐色效果</div>
<div class="sepia">全深褐色效果（100%）</div>

<!-- 自定义值 -->
<div class="sepia-[75%]">75% 深褐色效果</div>

Hue Rotate

色相旋转

html

<div class="hue-rotate-0">No rotation</div>
<div class="hue-rotate-15">15 degree rotation</div>
<div class="hue-rotate-30">30 degree rotation</div>
<div class="hue-rotate-60">60 degree rotation</div>
<div class="hue-rotate-90">90 degree rotation</div>
<div class="hue-rotate-180">180 degree rotation</div>

<!-- Arbitrary -->
<div class="hue-rotate-[120deg]">Custom rotation</div>

html

<div class="hue-rotate-0">无旋转</div>
<div class="hue-rotate-15">旋转15度</div>
<div class="hue-rotate-30">旋转30度</div>
<div class="hue-rotate-60">旋转60度</div>
<div class="hue-rotate-90">旋转90度</div>
<div class="hue-rotate-180">旋转180度</div>

<!-- 自定义值 -->
<div class="hue-rotate-[120deg]">自定义旋转角度</div>

Invert

反色

html

<div class="invert-0">No invert</div>
<div class="invert">Full invert (100%)</div>

<!-- Arbitrary -->
<div class="invert-[50%]">50% invert</div>

html

<div class="invert-0">无反色</div>
<div class="invert">全反色（100%）</div>

<!-- 自定义值 -->
<div class="invert-[50%]">50% 反色</div>

Saturate

饱和度

html

<div class="saturate-50">Desaturate to 50%</div>
<div class="saturate-100">Normal saturation (100%)</div>
<div class="saturate-150">Increase saturation 150%</div>
<div class="saturate-200">Increase saturation 200%</div>

html

<div class="saturate-50">降低饱和度至50%</div>
<div class="saturate-100">正常饱和度（100%）</div>
<div class="saturate-150">提高饱和度至150%</div>
<div class="saturate-200">提高饱和度至200%</div>

Backdrop Filters

背景滤镜

Applies filters to the backdrop (element behind).

为元素后方的背景应用滤镜效果。

Backdrop Blur

背景模糊

html

<div class="backdrop-blur-none">No blur</div>
<div class="backdrop-blur-sm">Small blur (4px)</div>
<div class="backdrop-blur">Base blur (12px)</div>
<div class="backdrop-blur-md">Medium blur (16px)</div>
<div class="backdrop-blur-lg">Large blur (24px)</div>
<div class="backdrop-blur-xl">Extra large blur (40px)</div>

html

<div class="backdrop-blur-none">无模糊</div>
<div class="backdrop-blur-sm">小模糊（4px）</div>
<div class="backdrop-blur">基础模糊（12px）</div>
<div class="backdrop-blur-md">中等模糊（16px）</div>
<div class="backdrop-blur-lg">大模糊（24px）</div>
<div class="backdrop-blur-xl">超大模糊（40px）</div>

Backdrop Brightness

背景亮度

html

<div class="backdrop-brightness-50">Darken backdrop 50%</div>
<div class="backdrop-brightness-75">Darken backdrop 75%</div>
<div class="backdrop-brightness-100">Normal (100%)</div>
<div class="backdrop-brightness-125">Brighten backdrop 125%</div>
<div class="backdrop-brightness-150">Brighten backdrop 150%</div>

html

<div class="backdrop-brightness-50">调暗背景至50%</div>
<div class="backdrop-brightness-75">调暗背景至75%</div>
<div class="backdrop-brightness-100">正常亮度（100%）</div>
<div class="backdrop-brightness-125">调亮背景至125%</div>
<div class="backdrop-brightness-150">调亮背景至150%</div>

Backdrop Contrast

背景对比度

html

<div class="backdrop-contrast-50">Reduce backdrop contrast 50%</div>
<div class="backdrop-contrast-100">Normal (100%)</div>
<div class="backdrop-contrast-150">Increase backdrop contrast 150%</div>

html

<div class="backdrop-contrast-50">降低背景对比度至50%</div>
<div class="backdrop-contrast-100">正常对比度（100%）</div>
<div class="backdrop-contrast-150">提高背景对比度至150%</div>

Backdrop Grayscale

背景灰度

html

<div class="backdrop-grayscale-0">No grayscale</div>
<div class="backdrop-grayscale">Full grayscale (100%)</div>

html

<div class="backdrop-grayscale-0">无灰度</div>
<div class="backdrop-grayscale">全灰度（100%）</div>

Backdrop Invert

背景反色

html

<div class="backdrop-invert-0">No invert</div>
<div class="backdrop-invert">Full invert (100%)</div>

html

<div class="backdrop-invert-0">无反色</div>
<div class="backdrop-invert">全反色（100%）</div>

Backdrop Saturate

背景饱和度

html

<div class="backdrop-saturate-50">Desaturate backdrop 50%</div>
<div class="backdrop-saturate-100">Normal (100%)</div>
<div class="backdrop-saturate-150">Increase backdrop saturation 150%</div>
</div>

html

<div class="backdrop-saturate-50">降低背景饱和度至50%</div>
<div class="backdrop-saturate-100">正常饱和度（100%）</div>
<div class="backdrop-saturate-150">提高背景饱和度至150%</div>
</div>

Backdrop Sepia

背景深褐色

html

<div class="backdrop-sepia-0">No sepia</div>
<div class="backdrop-sepia">Full sepia (100%)</div>

html

<div class="backdrop-sepia-0">无深褐色效果</div>
<div class="backdrop-sepia">全深褐色效果（100%）</div>

Mask (v4.1 NEW)

遮罩（v4.1 新增）

Mask Image

遮罩图片

html

<!-- Preset masks -->
<div class="mask-none">No mask applied</div>
<div class="mask-linear">Linear gradient mask (top to bottom)</div>
<div class="mask-radial">Radial gradient mask (center)</div>

<!-- Custom mask image -->
<div class="mask-image-[url('/images/mask.svg')]">Custom mask</div>

html

<!-- 预设遮罩 -->
<div class="mask-none">无遮罩</div>
<div class="mask-linear">线性渐变遮罩（从上到下）</div>
<div class="mask-radial">径向渐变遮罩（从中心向外）</div>

<!-- 自定义遮罩图片 -->
<div class="mask-image-[url('/images/mask.svg')]">自定义遮罩</div>

Mask Position

遮罩位置

html

<div class="mask-linear mask-position-center">Center mask</div>
<div class="mask-linear mask-position-top">Top mask</div>
<div class="mask-linear mask-position-bottom">Bottom mask</div>
<div class="mask-linear mask-position-left">Left mask</div>
<div class="mask-linear mask-position-right">Right mask</div>

html

<div class="mask-linear mask-position-center">居中遮罩</div>
<div class="mask-linear mask-position-top">顶部遮罩</div>
<div class="mask-linear mask-position-bottom">底部遮罩</div>
<div class="mask-linear mask-position-left">左侧遮罩</div>
<div class="mask-linear mask-position-right">右侧遮罩</div>

Mask Size

遮罩尺寸

html

<div class="mask-linear mask-size-contain">Contain mask</div>
<div class="mask-linear mask-size-cover">Cover mask</div>
<div class="mask-linear mask-size-auto">Auto mask size</div>

<!-- Arbitrary -->
<div class="mask-linear mask-size-[200%_100%]">Custom size</div>

html

<div class="mask-linear mask-size-contain">适配遮罩</div>
<div class="mask-linear mask-size-cover">覆盖遮罩</div>
<div class="mask-linear mask-size-auto">自动尺寸遮罩</div>

<!-- 自定义值 -->
<div class="mask-linear mask-size-[200%_100%]">自定义尺寸遮罩</div>

Mask Repeat

遮罩重复

html

<div class="mask-linear mask-repeat">Repeat mask</div>
<div class="mask-linear mask-repeat-x">Repeat horizontally</div>
<div class="mask-linear mask-repeat-y">Repeat vertically</div>
<div class="mask-linear mask-no-repeat">No repeat</div>

html

<div class="mask-linear mask-repeat">重复遮罩</div>
<div class="mask-linear mask-repeat-x">水平重复遮罩</div>
<div class="mask-linear mask-repeat-y">垂直重复遮罩</div>
<div class="mask-linear mask-no-repeat">不重复遮罩</div>

Combined Effects

组合效果

Blur + Brightness

模糊 + 亮度

html

<div class="blur-md brightness-75">
  Blurred and darkened
</div>

html

<div class="blur-md brightness-75">
  模糊且调暗
</div>

Shadow + Opacity

阴影 + 透明度

html

<div class="shadow-lg shadow-blue-500/50 opacity-90">
  Shadow with tint and opacity
</div>

html

<div class="shadow-lg shadow-blue-500/50 opacity-90">
  带色调和透明度的阴影
</div>

Backdrop Blur + Brightness

背景模糊 + 亮度

html

<div class="backdrop-blur-md backdrop-brightness-90">
  Frosted glass effect
</div>

html

<div class="backdrop-blur-md backdrop-brightness-90">
  毛玻璃效果
</div>

Inset Shadow + Grayscale

内阴影 + 灰度

html

<div class="inset-shadow inset-shadow-black/20 grayscale-50">
  Pressed effect with grayscale
</div>

html

<div class="inset-shadow inset-shadow-black/20 grayscale-50">
  按压效果搭配灰度
</div>

Responsive Effects

响应式效果

html

<!-- Mobile: small blur, Tablet: medium blur, Desktop: large blur -->
<div class="blur-sm md:blur-md lg:blur-lg">
  Responsive blur
</div>

<!-- Mobile: light opacity, Desktop: darker -->
<div class="opacity-75 md:opacity-50">
  Responsive opacity
</div>

<!-- Backdrop blur on medium+ screens -->
<div class="md:backdrop-blur-lg">
  Frosted glass on desktop
</div>

html

<!-- 移动端：小模糊，平板：中等模糊，桌面端：大模糊 -->
<div class="blur-sm md:blur-md lg:blur-lg">
  响应式模糊
</div>

<!-- 移动端：高透明度，桌面端：低透明度 -->
<div class="opacity-75 md:opacity-50">
  响应式透明度
</div>

<!-- 中等及以上屏幕应用背景模糊 -->
<div class="md:backdrop-blur-lg">
  桌面端毛玻璃效果
</div>

Dark Mode

暗色模式

html

<!-- Shadow color changes in dark mode -->
<div class="shadow-md shadow-black/25 dark:shadow-black/50">
  Darker shadow in dark mode
</div>

<!-- Opacity adjustments -->
<div class="opacity-70 dark:opacity-60">
  More visible in dark mode
</div>

<!-- Different blur in dark mode -->
<div class="blur-sm dark:blur-none">
  Less blur in dark mode
</div>

html

<!-- 暗色模式下阴影颜色变化 -->
<div class="shadow-md shadow-black/25 dark:shadow-black/50">
  暗色模式下阴影更深
</div>

<!-- 透明度调整 -->
<div class="opacity-70 dark:opacity-60">
  暗色模式下更清晰
</div>

<!-- 暗色模式下取消模糊 -->
<div class="blur-sm dark:blur-none">
  暗色模式下无模糊
</div>

Configuration (v4.1)

配置（v4.1）

CSS Theme Variables

CSS 主题变量

css

@import "tailwindcss";

@theme {
  --color-shadow: #000;
  --blur-custom: 20px;
}

css

@import "tailwindcss";

@theme {
  --color-shadow: #000;
  --blur-custom: 20px;
}

Custom Effects

自定义效果

css

@utility glass-effect {
  @apply backdrop-blur-md backdrop-brightness-90 opacity-90;
}

@utility glow {
  box-shadow: 0 0 20px var(--color-cyan-500);
}

css

@utility glass-effect {
  @apply backdrop-blur-md backdrop-brightness-90 opacity-90;
}

@utility glow {
  box-shadow: 0 0 20px var(--color-cyan-500);
}

Real-world Examples

实际场景示例

Modal with frosted backdrop

带毛玻璃背景的模态框

html

<div class="fixed inset-0 backdrop-blur-sm backdrop-brightness-75">
  <!-- Modal content -->
</div>

html

<div class="fixed inset-0 backdrop-blur-sm backdrop-brightness-75">
  <!-- 模态框内容 -->
</div>

Card with elevated shadow

带立体阴影的卡片

html

<div class="rounded-lg bg-white p-6 shadow-lg shadow-blue-500/10">
  Card with subtle colored shadow
</div>

html

<div class="rounded-lg bg-white p-6 shadow-lg shadow-blue-500/10">
  带淡蓝色阴影的卡片
</div>

Image with fade-out mask

带渐隐遮罩的图片

html

<div class="mask-linear mask-position-bottom">
  <img src="image.jpg" alt="Fading image" />
</div>

html

<div class="mask-linear mask-position-bottom">
  <img src="image.jpg" alt="渐隐图片" />
</div>

Glassmorphism component

玻璃态组件

html

<div class="backdrop-blur-md bg-white/30 rounded-lg border border-white/20">
  Glass effect container
</div>

html

<div class="backdrop-blur-md bg-white/30 rounded-lg border border-white/20">
  玻璃态容器
</div>

Browser Support

浏览器支持

Shadows: All modern browsers
Filters: Chrome 18+, Firefox 35+, Safari 6+
Backdrop filters: Chrome 76+, Safari 9+, Firefox 103+
Masks: Chrome 1+, Safari 4+, Firefox 53+
Opacity: All modern browsers

阴影：所有现代浏览器
滤镜：Chrome 18+、Firefox 35+、Safari 6+
背景滤镜：Chrome 76+、Safari 9+、Firefox 103+
遮罩：Chrome 1+、Safari 4+、Firefox 53+
透明度：所有现代浏览器

Performance Tips

性能优化建议

Use backdrop-blur sparingly - heavy performance impact
Prefer opacity for transparency over rgba colors
Use inset-shadow instead of multiple box-shadows for layering
Combine related effects in custom utilities to reduce class count
Test backdrop effects on low-end devices

谨慎使用backdrop-blur，会带来较大性能消耗
优先使用opacity实现透明效果，而非rgba颜色
如需多层阴影效果，优先使用inset-shadow而非多个box-shadow
将相关效果组合为自定义工具类，减少类名数量
在低端设备上测试背景滤镜效果

References

参考文档

shadows.md - Detailed shadow configuration
filters.md - Filter effects reference
opacity.md - Opacity and transparency

shadows.md - 阴影配置详细说明
filters.md - 滤镜效果参考文档
opacity.md - 透明度与半透明效果说明