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

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

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

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

Need a hint?

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