0
0
Tailwindmarkup~5 mins

Blur and brightness filters in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Blur and brightness filters help you change how things look on your webpage. Blur makes things fuzzy, and brightness makes things lighter or darker.

To make a background image blurry so text on top is easier to read.
To highlight a button by making it brighter when hovered.
To create a soft focus effect on photos.
To dim an image when a popup appears on top.
To add cool visual effects that catch the eye.
Syntax
Tailwind
blur-{size}
brightness-{percentage}

Sizes for blur can be like blur-sm, blur, blur-md, blur-lg, blur-xl, blur-2xl.

Brightness uses percentages like brightness-50 (darker) to brightness-150 (brighter).

Examples
This adds a small blur effect to the text inside the div.
Tailwind
<div class="blur-sm">This text is slightly blurry.</div>
This makes the photo 25% brighter than normal.
Tailwind
<img class="brightness-125" src="photo.jpg" alt="Bright photo">
This box is blurry and a bit darker.
Tailwind
<div class="blur-lg brightness-75">Blurred and darker box</div>
Sample Program

This page shows three examples: a blurred background image with text on top, a button that gets brighter when hovered, and a box that is slightly blurred and brighter.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blur and Brightness Filters</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen gap-8 bg-gray-100 p-6">
  <h1 class="text-2xl font-bold">Blur and Brightness Filters Example</h1>

  <div class="relative w-64 h-40">
    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80" alt="Nature" class="w-full h-full object-cover rounded-lg blur-md">
    <p class="absolute inset-0 flex items-center justify-center text-white text-lg font-semibold">Blurred Background</p>
  </div>

  <button class="px-6 py-3 bg-blue-600 text-white rounded-lg brightness-90 hover:brightness-125 transition">
    Hover me to brighten
  </button>

  <div class="w-64 h-24 bg-green-400 rounded-lg blur-sm brightness-110 flex items-center justify-center text-white font-medium">
    Slightly blurred and brighter box
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use transition classes to make brightness changes smooth on hover.

Blur can affect readability, so use it carefully especially on text.

Brightness values below 100% make things darker, above 100% make them brighter.

Summary

Blur and brightness filters change how elements look by making them fuzzy or lighter/darker.

Tailwind uses simple class names like blur-md and brightness-125 to apply these effects.

Combine these filters with hover and transition for nice interactive effects.