Bird
Raised Fist0
Tailwindmarkup~5 mins

Blur and brightness filters in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the Tailwind class blur-sm do to an element?
easy
A. It makes the element slightly blurry.
B. It increases the brightness of the element.
C. It adds a shadow around the element.
D. It changes the element's color to gray.

Solution

  1. Step 1: Understand the blur-sm class

    The blur-sm class applies a small blur filter, making the element look fuzzy.

  2. Step 2: Compare with other effects

    Brightness changes lightness, shadow adds shadow, and gray changes color, so these are different effects.

  3. Final Answer:

    It makes the element slightly blurry. -> Option A

  4. Quick Check:

    Blur = fuzzy effect [OK]
Hint: Blur classes add fuzziness, brightness changes lightness [OK]
Common Mistakes:
  • Confusing blur with brightness
  • Thinking blur adds shadow
  • Assuming blur changes color
2. Which Tailwind class correctly applies 125% brightness to an element?
easy
A. bright-125
B. brightness-1.25
C. brightness125
D. brightness-125

Solution

  1. Step 1: Recall Tailwind brightness syntax

    Tailwind uses brightness- followed by a number like 125 for 125% brightness.

  2. Step 2: Check each option

    Only brightness-125 matches Tailwind's correct syntax; others are invalid.

  3. Final Answer:

    brightness-125 -> Option D

  4. Quick Check:

    Correct class = brightness-125 [OK]
Hint: Brightness classes use dash and number, like brightness-125 [OK]
Common Mistakes:
  • Using dot instead of dash
  • Omitting dash between brightness and number
  • Using wrong prefix like bright
3. What visual effect will this code produce?
<div class="blur-md brightness-75">Hello</div>
medium
A. The text will be blurry and brighter than normal.
B. The text will be sharp and brighter than normal.
C. The text will be blurry and darker than normal.
D. The text will be sharp and darker than normal.

Solution

  1. Step 1: Analyze the blur-md class

    blur-md applies a medium blur, making the text fuzzy.

  2. Step 2: Analyze the brightness-75 class

    brightness-75 reduces brightness to 75%, making the text darker.

  3. Final Answer:

    The text will be blurry and darker than normal. -> Option C

  4. Quick Check:

    Blur = fuzzy, brightness 75% = darker [OK]
Hint: Lower brightness means darker; blur means fuzzy [OK]
Common Mistakes:
  • Mixing up brightness values (higher means brighter)
  • Assuming blur sharpens text
  • Ignoring combined effects
4. Identify the error in this Tailwind usage:
<img class="blur-4xl brightness-150" src="photo.jpg" alt="Photo" />
medium
A. The class blur-4xl does not exist in Tailwind.
B. The brightness value 150 is invalid; max is 100.
C. The alt attribute is missing for accessibility.
D. The src attribute should be inside quotes.

Solution

  1. Step 1: Check blur class validity

    Tailwind supports blur sizes like sm, md, lg, xl, 2xl, 3xl but not 4xl.

  2. Step 2: Verify brightness and attributes

    Brightness-150 is valid (150%), alt attribute is present, src is correctly quoted.

  3. Final Answer:

    The class blur-4xl does not exist in Tailwind. -> Option A

  4. Quick Check:

    Invalid blur class = blur-4xl [OK]
Hint: Check Tailwind docs for valid blur sizes [OK]
Common Mistakes:
  • Assuming any 'xl' size exists
  • Thinking brightness max is 100%
  • Ignoring alt attribute importance
5. You want a button that becomes brighter and less blurry when hovered. Which Tailwind classes achieve this?
<button class="?">Click Me</button>
hard
A. blur-none brightness-125 hover:blur-lg hover:brightness-75 transition
B. blur-lg brightness-75 hover:blur-none hover:brightness-125 transition
C. blur-md brightness-100 hover:blur-md hover:brightness-100
D. blur-sm brightness-50 hover:blur-sm hover:brightness-50

Solution

  1. Step 1: Understand the base state

    The button starts blurry and darker with blur-lg brightness-75.

  2. Step 2: Understand the hover state

    On hover, blur is removed (blur-none) and brightness increases to 125% (brightness-125), making it clearer and brighter.

  3. Step 3: Confirm transition for smooth effect

    transition enables smooth change on hover.

  4. Final Answer:

    blur-lg brightness-75 hover:blur-none hover:brightness-125 transition -> Option B

  5. Quick Check:

    Hover removes blur and brightens = blur-lg brightness-75 hover:blur-none hover:brightness-125 transition [OK]
Hint: Use hover:blur-none and hover:brightness-125 for clearer, brighter hover [OK]
Common Mistakes:
  • Reversing hover effects
  • Forgetting transition class
  • Using same blur and brightness on hover