tailwindcss-effects

Tailwind CSS v4.3 视觉效果工具的完整参考：盒阴影（`shadow-*`、自定义阴影颜色、新增的 `inset-shadow-*`）、`opacity-*`、CSS 滤镜（模糊/亮度/对比度/灰度/棕褐色/色相旋转/反色/饱和度）、背景滤镜（`backdrop-blur-*`、`backdrop-brightness-*` 等，用于玻璃拟态/磨砂玻璃效果），以及新增的 `mask-*` 工具（图像、位置、大小、重复）。

包括组合效果模式（模糊+亮度、用于磨砂玻璃的背景模糊+亮度）、响应式/暗色模式变体、自定义 @theme/@utility 扩展，以及各效果类别的浏览器支持说明。

Tailwind CSS v4.3 效果

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

盒阴影

标准阴影

<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>

阴影颜色（自 v3.0 起）

<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>

内阴影（自 v4.0 起）

<div class="inset-shadow-2xs">Inset 2xs shadow</div>
<div class="inset-shadow-xs">Inset xs shadow</div>
<div class="inset-shadow-sm">Inset small shadow</div>
<div class="inset-shadow-sm inset-shadow-blue-500">Inset shadow with color</div>

任意阴影值

<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>

不透明度

不透明度工具

<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>

搭配颜色的不透明度

<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>

滤镜

模糊

<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>


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

亮度

<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>

对比度

<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>

灰度

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


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

棕褐色

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


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

色相旋转

<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>


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

反色

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


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

饱和度

<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>

背景滤镜

对背景（元素后方的内容）应用滤镜。

背景模糊

<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>

背景亮度

<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>

背景对比度

<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>

背景灰度

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

背景反色

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

背景饱和度

<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>

背景棕褐色

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

遮罩（自 v4.1 起）

遮罩图像

<div class="mask-none">No mask applied</div>


<div class="mask-b-from-20% mask-b-to-80%">Fade out at the bottom</div>
<div class="mask-x-from-70% mask-x-to-90%">Fade both horizontal edges</div>


<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80%">Angled mask</div>


<div class="mask-radial-from-75% mask-radial-at-left">Radial mask</div>


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

遮罩位置

<div class="mask-[url(/img/circle.png)] mask-center">Center mask</div>
<div class="mask-[url(/img/circle.png)] mask-top">Top mask</div>
<div class="mask-[url(/img/circle.png)] mask-bottom">Bottom mask</div>
<div class="mask-[url(/img/circle.png)] mask-left">Left mask</div>
<div class="mask-[url(/img/circle.png)] mask-right">Right mask</div>


<div class="mask-position-[center_top_1rem]">Custom position</div>

遮罩大小

<div class="mask-[url(/img/scribble.png)] mask-contain">Contain mask</div>
<div class="mask-[url(/img/scribble.png)] mask-cover">Cover mask</div>
<div class="mask-[url(/img/scribble.png)] mask-auto">Auto mask size</div>


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

遮罩重复

<div class="mask-[url(/img/circle.png)] mask-repeat">Repeat mask</div>
<div class="mask-[url(/img/circle.png)] mask-repeat-x">Repeat horizontally</div>
<div class="mask-[url(/img/circle.png)] mask-repeat-y">Repeat vertically</div>
<div class="mask-[url(/img/circle.png)] mask-no-repeat">No repeat</div>

组合效果

模糊 + 亮度

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

阴影 + 不透明度

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

背景模糊 + 亮度

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

内阴影 + 灰度

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

响应式效果

<div class="blur-sm md:blur-md lg:blur-lg">
  Responsive blur
</div>


<div class="opacity-75 md:opacity-50">
  Responsive opacity
</div>


<div class="md:backdrop-blur-lg">
  Frosted glass on desktop
</div>

暗色模式

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


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


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

配置（v4.3）

CSS 主题变量

@import "tailwindcss";

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

自定义效果

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

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

实际示例

带磨砂背景的模态框

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

带悬浮阴影的卡片

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

带渐隐遮罩的图像

<div class="mask-b-from-50%">
  <img src="image.jpg" alt="Fading image" />
</div>

玻璃拟态组件

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

浏览器支持

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

性能提示

1. 谨慎使用背景模糊——性能开销较大
2. 透明效果优先使用不透明度，而非 rgba 颜色
3. 使用内阴影代替多个盒阴影来实现分层
4. 将相关效果组合到自定义工具中，以减少类的数量
5. 在低端设备上测试背景效果

参考资料

• shadows.md - 阴影配置详解
• filters.md - 滤镜效果参考
• opacity.md - 不透明度与透明效果