Tailwind CSS 滤镜 #

<div class="blur-none">无模糊</div>
<div class="blur-sm">小模糊</div>
<div class="blur">默认模糊</div>
<div class="blur-md">中等模糊</div>
<div class="blur-lg">大模糊</div>
<div class="blur-xl">超大模糊</div>
<div class="blur-2xl">特大模糊</div>
<div class="blur-3xl">最大模糊</div>

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

<div class="brightness-0">0%（黑色）</div>
<div class="brightness-50">50%</div>
<div class="brightness-75">75%</div>
<div class="brightness-90">90%</div>
<div class="brightness-95">95%</div>
<div class="brightness-100">100%（原始）</div>
<div class="brightness-105">105%</div>
<div class="brightness-110">110%</div>
<div class="brightness-125">125%</div>
<div class="brightness-150">150%</div>
<div class="brightness-200">200%</div>

<div class="contrast-0">0</div>
<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>

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

<img class="grayscale hover:grayscale-0 transition-all" src="image.jpg">

<div class="hue-rotate-0">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="invert-0">0%</div>
<div class="invert">100%（反色）</div>

<div class="saturate-0">0（无色）</div>
<div class="saturate-50">50%</div>
<div class="saturate-100">100%（原始）</div>
<div class="saturate-150">150%</div>
<div class="saturate-200">200%</div>

<div class="sepia-0">0%</div>
<div class="sepia">100%（棕褐色）</div>

<div class="drop-shadow-sm">小投影</div>
<div class="drop-shadow">默认投影</div>
<div class="drop-shadow-md">中等投影</div>
<div class="drop-shadow-lg">大投影</div>
<div class="drop-shadow-xl">超大投影</div>
<div class="drop-shadow-2xl">特大投影</div>
<div class="drop-shadow-none">无投影</div>

<!-- 盒阴影：应用于元素盒子 -->
<div class="shadow-lg bg-white p-4">盒阴影</div>

<!-- 投影滤镜：应用于元素内容（适合透明图片） -->
<img class="drop-shadow-lg" src="logo.png">

<div class="blur-sm brightness-110 contrast-125">
  组合多个滤镜
</div>

<div class="filter">启用滤镜</div>
<div class="filter-none">重置所有滤镜</div>

<div class="group overflow-hidden rounded-lg">
  <img class="w-full h-48 object-cover grayscale group-hover:grayscale-0 transition-all duration-300" src="image.jpg">
</div>

<img class="brightness-75 hover:brightness-100 transition-all" src="image.jpg">

<img class="sepia hover:sepia-0 transition-all" src="image.jpg">

<img class="contrast-125 saturate-125" src="image.jpg">

<div class="relative">
  <div class="absolute inset-0 blur-sm bg-cover bg-center" style="background-image: url('image.jpg')"></div>
  <div class="relative z-10 p-8">
    <h1 class="text-3xl font-bold text-white">模糊背景文字</h1>
  </div>
</div>

<button class="p-2 rounded hover:brightness-110 transition-all">
  <svg class="w-6 h-6">...</svg>
</button>

<button class="opacity-50 grayscale cursor-not-allowed">
  禁用按钮
</button>

<div class="grid grid-cols-3 gap-4">
  <img class="grayscale hover:grayscale-0 transition-all" src="1.jpg">
  <img class="sepia hover:sepia-0 transition-all" src="2.jpg">
  <img class="blur-sm hover:blur-0 transition-all" src="3.jpg">
</div>

<div class="grid grid-cols-4 gap-2">
  <img class="hue-rotate-0" src="image.jpg">
  <img class="hue-rotate-90" src="image.jpg">
  <img class="hue-rotate-180" src="image.jpg">
  <img class="hue-rotate-270" src="image.jpg">
</div>

<div class="relative overflow-hidden rounded-lg">
  <img class="w-full h-64 object-cover blur-0" src="image.jpg">
  <div class="absolute inset-0 backdrop-blur-md bg-white/30">
    <div class="p-6">
      <h3 class="text-xl font-bold">毛玻璃效果</h3>
      <p class="mt-2">背景模糊叠加</p>
    </div>
  </div>
</div>