Blur and brightness filters in Tailwind - Mini Project: Build & Apply

Blur and Brightness Filters with Tailwind CSS

📖 Scenario: You are creating a simple webpage section to showcase an image with visual effects. You want to apply blur and brightness filters to the image using Tailwind CSS classes.

🎯 Goal: Build a webpage with an image inside a container. Apply a blur filter and a brightness filter to the image using Tailwind CSS utility classes.

📋 What You'll Learn

Use Tailwind CSS classes to add a blur effect to the image

Use Tailwind CSS classes to add a brightness effect to the image

Use semantic HTML elements

Make sure the image is responsive

Include an accessible alt attribute for the image

💡 Why This Matters

🌍 Real World

Web designers often use CSS filters to enhance images visually without editing the image files. Tailwind CSS makes it easy to add these effects with simple classes.

💼 Career

Knowing how to apply CSS filters with utility-first frameworks like Tailwind is useful for frontend developers and UI designers to create visually appealing and accessible web pages quickly.

1

Create the HTML structure with an image

Create a section element with a class container mx-auto p-4. Inside it, add an img element with src="https://via.placeholder.com/400x300" and alt="Sample image". This sets up the image to apply filters on later.

Tailwind

Hint

Use a section with classes container mx-auto p-4. Add an img with the exact src and alt attributes.

2

Add a blur filter class to the image

Add the Tailwind CSS class blur-sm to the img element inside the section. This will apply a small blur effect to the image.

Tailwind

Hint

Add blur-sm inside the class attribute of the img tag.

3

Add a brightness filter class to the image

Add the Tailwind CSS class brightness-125 alongside blur-sm in the img element's class attribute. This increases the image brightness by 25%.

Tailwind

Hint

Add brightness-125 after blur-sm inside the class attribute.

4

Make the image responsive and add accessibility

Add the Tailwind CSS class w-full to the img element to make it scale with its container. Confirm the alt attribute is exactly "Sample image" for accessibility.

Tailwind

Hint

Add w-full to the class attribute to make the image responsive. Keep the alt text as "Sample image".

Practice

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