Css Module 38

  Module 38 : CSS Blend Modes & Filters

1. Introduction to CSS Blend Modes & Filters

Objective:

Understand how to creatively manipulate images using native CSS capabilities without relying on photo editing software or JavaScript.

Key Concepts:

What are CSS blend modes?

What are CSS filters?

Differences between image manipulation in CSS vs image editors.

 use cases: web design, UI hover effects, artistic layouts.

2. CSS Blend Modes

2.1 What Are Blend Modes?

Blend modes define how an element’s content should blend with the background or with other layers.

2.2 Syntax:

css

 code

.element { mix-blend-mode: multiply; }

OR

css code

.element { background-blend-mode: overlay; }

2.3 Common Blend Modes:

Blend Mode

Effect Description

normal

No blend; default rendering.

multiply

Darkens colors by multiplying the base color.

screen

Brightens by inverting, multiplying, then inverting again.

overlay

Combination of multiply and screen depending on base.

lighten/darken

Chooses lighter/darker values.

difference

Subtracts bottom from top and vice versa.

2.4 Practical Example:

html code

<div class="container"> <img src="photo.jpg" class="blend-image" /> <div class="overlay"></div> </div>

css code

.container { position: relative; } .blend-image { width: 100%; mix-blend-mode: multiply; } .overlay { background-color: rgba(255, 0, 0, 0.5); position: absolute; inset: 0; }

3. CSS Filters

3.1 What Are Filters?

Filters modify the appearance of an image (or any element) by applying visual effects like blur, brightness, and grayscale.

3.2 Syntax:

css

 code

img { filter: grayscale(100%) blur(4px); }

3.3 Available Filters:

Filter

Description

blur(px)

Applies Gaussian blur.

brightness()

Adjusts brightness (1 = normal).

contrast()

Adjusts contrast.

grayscale()

Converts image to grayscale.

hue-rotate()

Rotates the hue.

invert()

Inverts the colors.

opacity()

Adjusts opacity.

saturate()

Adjusts color saturation.

sepia()

Applies sepia tone.

3.4 Practical Example:

html

code

<img src="sample.jpg" class="filtered-image" />

css

 code

.filtered-image { filter: grayscale(80%) blur(2px) brightness(1.2); }

4. Combining Blend Modes and Filters

Blend modes and filters can be combined to produce dynamic image effects for hover states, transitions, or overlays.

Example:

html

 code

<div class="image-wrapper"> <img src="landscape.jpg" class="image" /> </div>

css

 code

.image-wrapper { background: linear-gradient(to bottom right, #ff0000, #0000ff); mix-blend-mode: overlay; } .image { width: 100%; filter: brightness(0.9) contrast(1.3); transition: filter 0.3s ease, mix-blend-mode 0.3s ease; } .image:hover { filter: grayscale(100%) blur(1px); mix-blend-mode: multiply; }

5. Use Cases in Design

Hero Image with Artistic Overlay: Use blend modes to colorize images dynamically based on themes.

Hover Effects for UI/UX: Combine filters and blend modes for stylish hover effects.

Photography Portfolios: Apply subtle filters to make thumbnails consistent.

Games/WebGL/Canvas Art: Use blend modes for dynamic visual depth.

6. Practical Exercises

Exercise 1: Color Tinted Backgrounds

Goal: Create a background image that blends with a color overlay.

html

 code

<div class="tinted-bg"> <img src="image.jpg" /> </div>

css

code

.tinted-bg img { width: 100%; mix-blend-mode: overlay; background-color: rgba(255, 165, 0, 0.4); }

Task: Try different blend modes and note the visual changes.

Exercise 2: Image Hover Reveal

Goal: Create a grayscale image that reveals its color on hover.

css

 code

img { filter: grayscale(100%); transition: filter 0.5s ease; } img:hover { filter: grayscale(0%); }

Exercise 3: Full UI Card Design

Design a card with an image background using background-blend-mode, text overlay, and a filter.

html

code

<div class="card"> <div class="card-content"> <h2>Explore</h2> </div> </div>

css

code

.card { background-image: url("city.jpg"); background-size: cover; background-blend-mode: darken; background-color: rgba(0, 0, 0, 0.5); filter: brightness(0.8); padding: 2rem; color: white; }

7. Tips and Best Practices

Performance: Filters and blend modes can be GPU-intensive. Use sparingly or test performance.

Cross-browser compatibility: Most modern browsers support these CSS features, but always check compatibility on Can I use.

Accessibility: Avoid filters that reduce clarity or contrast for critical elements.

Fallbacks: Provide fallback styles for unsupported browsers if targeting older audiences.

8. Task (Project)

Project Title: Image Effects Gallery

Create a gallery where each image tile:

Has a blend mode and filter combination.

On hover, changes the effect (e.g., from sepia to color, from darken to screen).

Use a layout (e.g., grid or flexbox).

Include text overlays with readability ensured using CSS filters.

9. Summary & Key Takeaways

CSS blend modes are like Photoshop layers — they mix content and backgrounds in artistic ways.

         

   

Filters offer image editing like blur, grayscale, brightness, directly in the browser.

Combining both opens creative doors for interactive web design.

Always test visual effects across devices and browsers for best UX.

10. Theory

Explain the conceptual difference between blend modes and filters.

Show  examples (before/after) and how CSS mimics Photoshop logic.

 2: Code Live

Walkthrough of basic filter and blend mode examples.

Code along with students to build image hover effects.

 3: Project Session

students through the gallery project.

Encourage creativity in filter stacks and mode combos.