Mix blend modes in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a multiply blend mode to the image.

Tailwind

<img src="image.jpg" alt="Sample" class="[1]">

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

Ablend-multiply

Bmix-blend-overlay

Cbg-blend-multiply

Dmix-blend-multiply

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-blend-multiply which applies to background layers, not the element itself.

Using incorrect class names like blend-multiply.

The mix-blend-multiply class applies the multiply blend mode to the element, blending it with the background.

2fill in blank

medium

Complete the code to apply a screen blend mode to a div with a background color.

Tailwind

<div class="bg-blue-500 [1] p-4">Content</div>

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

Amix-blend-screen

Bmix-blend-darken

Cbg-blend-screen

Dmix-blend-color-dodge

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-blend-screen which blends background layers, not the element itself.

Choosing unrelated blend modes like mix-blend-darken.

The mix-blend-screen class applies the screen blend mode, which lightens the colors by inverting, multiplying, and inverting again.

3fill in blank

hard

Fix the error in the code to correctly apply the overlay blend mode to the image.

Tailwind

<img src="photo.png" alt="Photo" class="[1]">

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

Abg-blend-overlay

Bmix-blend-overlay

Cblend-overlay

Dmix-blend-multiply

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-blend-overlay which only blends background layers.

Using incomplete or incorrect class names like blend-overlay.

The correct Tailwind class for overlay blend mode on an element is mix-blend-overlay. Other options are invalid or apply to backgrounds.

4fill in blank

hard

Fill both blanks to apply a background blend mode of multiply and a text color of white.

Tailwind

<div class="bg-red-600 [1] text-[2] p-6">Hello</div>

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

Abg-blend-multiply

Bwhite

Cblack

Dmix-blend-multiply

Attempts:

3 left

💡 Hint

Common Mistakes

Using mix-blend-multiply instead of bg-blend-multiply for background layers.

Choosing black text which may not contrast well on red.

The bg-blend-multiply class blends background layers using multiply mode. The text color white ensures good contrast on the red background.

5fill in blank

hard

Fill all three blanks to create a div with a yellow background, apply screen blend mode to background layers, and set text color to black.

Tailwind

<div class="bg-[1] [2] text-[3] p-8">Welcome</div>

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

Ayellow-400

Bbg-blend-screen

Cblack

Dmix-blend-screen

Attempts:

3 left

💡 Hint

Common Mistakes

Using mix-blend-screen which blends the element, not background layers.

Choosing text colors that do not contrast well with yellow.

The bg-yellow-400 sets a bright yellow background. bg-blend-screen applies screen blend mode to background layers. text-black sets the text color to black for good contrast.