Blur and brightness filters in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the blur filter do in Tailwind CSS?

The blur filter makes an element look fuzzy or out of focus by softening its edges. It is like looking through frosted glass.

beginner

How do you apply a brightness filter in Tailwind CSS?

You use classes like brightness-50 to make an element darker or brightness-150 to make it brighter. The number is a percentage of the original brightness.

intermediate

What is the effect of filter utility in Tailwind CSS?

The filter utility enables CSS filter effects like blur and brightness on an element. Without it, filter classes won’t work.

beginner

Which Tailwind class would you use to add a small blur effect?

Use blur-sm to add a small blur effect that slightly softens the element’s edges.

intermediate

How can you combine blur and brightness filters in Tailwind CSS?

Add the <code>filter</code> class plus both <code>blur-*</code> and <code>brightness-*</code> classes on the same element. For example: <code>filter blur-md brightness-125</code>.

Which Tailwind class enables filter effects like blur and brightness?

A filter

B blur

C brightness

D shadow

The filter class activates CSS filter effects. Without it, blur or brightness classes won’t apply.

What does brightness-75 do to an element?

A Removes brightness

B Makes it 75% as bright as normal

C Increases brightness by 75%

D Makes it 75% blurry

brightness-75 reduces brightness to 75% of the original, making the element darker.

Which class adds a medium blur effect in Tailwind?

A blur-md

B blur-lg

C blur-sm

D blur-none

blur-md applies a medium level of blur to soften edges.

How do you apply both blur and brightness filters together?

A Use only <code>brightness-*</code> class

B Use only <code>blur-*</code> class

C Add <code>filter</code> plus both <code>blur-*</code> and <code>brightness-*</code> classes

D Add <code>shadow</code> class

You must add filter plus both filter classes to combine effects.

What visual effect does blur-sm create?

A No effect

B A bright glow

C A shadow behind the element

D A slight fuzzy or soft look

blur-sm softly blurs the element’s edges for a subtle fuzzy look.

Explain how to use Tailwind CSS to make an image look blurry and darker at the same time.

Remember you need the filter class to activate effects.

Describe the difference between blur-sm and blur-lg in Tailwind CSS.

Think about how much the image looks fuzzy.