Backdrop blur (frosted glass) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a backdrop blur effect using Tailwind CSS.

Tailwind

<div class="bg-white bg-opacity-30 [1] p-6 rounded-lg">
  <p>This is a frosted glass effect.</p>
</div>

Drag options to blanks, or click blank then click option'

Abackdrop-blur

Bblur

Copacity-50

Dbg-blur

Attempts:

3 left

💡 Hint

Common Mistakes

Using blur instead of backdrop-blur blurs the element itself, not the background.

Using opacity-50 changes transparency but does not blur.

The backdrop-blur class applies a blur effect to the background behind the element, creating the frosted glass look.

2fill in blank

medium

Complete the code to make the backdrop blur stronger with Tailwind CSS.

Tailwind

<div class="bg-white bg-opacity-20 [1] p-8 rounded-xl">
  <h2>Stronger frosted glass</h2>
</div>

Drag options to blanks, or click blank then click option'

Abackdrop-blur-sm

Bbackdrop-blur-md

Cbackdrop-blur-none

Dbackdrop-blur-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using backdrop-blur-none removes the blur effect.

Choosing backdrop-blur-sm results in a weaker blur.

The backdrop-blur-lg class applies a stronger blur effect than backdrop-blur-sm or backdrop-blur-md.

3fill in blank

hard

Fix the error in the Tailwind class to correctly apply backdrop blur.

Tailwind

<section class="bg-white bg-opacity-25 [1] p-10 rounded-2xl">
  <p>Correct frosted glass effect.</p>
</section>

Drag options to blanks, or click blank then click option'

Abackdrop-blur-xxl

Bbackdrop-blur-lg

Cbackdrop-blur-xl

Dbackdrop-blur-xxs

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent sizes like xxl or xxs causes no effect.

Choosing a smaller size than intended.

backdrop-blur-xl is a valid Tailwind class for a strong blur. backdrop-blur-xxl and backdrop-blur-xxs do not exist.

4fill in blank

hard

Fill both blanks to create a frosted glass card with backdrop blur and padding.

Tailwind

<div class="bg-white bg-opacity-40 [1] [2]">
  <p>Frosted glass card with backdrop blur and padding.</p>
</div>

Drag options to blanks, or click blank then click option'

Abackdrop-blur-md

Bp-4

Crounded-lg

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using rounded-lg instead of padding misses the spacing requirement.

Using text-center does not affect blur or padding.

backdrop-blur-md applies the blur effect, and p-4 adds padding inside the card.

5fill in blank

hard

Fill all three blanks to create a responsive frosted glass section with blur, padding, and rounded corners.

Tailwind

<section class="bg-white bg-opacity-30 [1] [2] [3] md:p-12 md:rounded-xl">
  <h3>Responsive frosted glass section</h3>
</section>

Drag options to blanks, or click blank then click option'

Abackdrop-blur-sm

Bp-6

Crounded-md

Dtext-gray-800

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-gray-800 does not affect blur, padding, or rounding.

Skipping padding or rounded corners reduces the frosted glass look.

backdrop-blur-sm adds a subtle blur, p-6 adds padding on small screens, and rounded-md rounds corners. The md:p-12 and md:rounded-xl classes make it more spacious and rounded on medium screens.