0Pricing
CSS Academy · Lesson

filter: blur brightness contrast grayscale

Apply photographic filter effects to elements using the CSS filter property functions.

filter: blur brightness contrast grayscale is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The CSS filter Property

The filter property applies graphical effects to elements — similar to Photoshop adjustment layers — without editing the actual image.

filter: blur()

Applies a Gaussian blur. The argument is the blur radius.

.frosted {
  filter: blur(8px);
}

.hero-bg {
  filter: blur(3px) scale(1.05);
  /* scale prevents blurred edges from showing */
}

filter: brightness()

Adjusts brightness. 1 = original, 0 = black, 2 = twice as bright.

.dimmed {
  filter: brightness(0.7);
}

img:hover {
  filter: brightness(1.1);
}

filter: contrast()

Adjusts contrast. 1 = original, 0 = flat gray, values above 1 increase contrast.

.high-contrast {
  filter: contrast(1.5);
}

.low-contrast {
  filter: contrast(0.8);
}

filter: grayscale()

Converts to grayscale. 0 = full color, 1 (or 100%) = completely gray.

.grayscale {
  filter: grayscale(1);
}

.portfolio-item:hover {
  filter: grayscale(0);
  transition: filter 300ms ease;
}

filter: saturate()

Adjusts color saturation. 0 = gray, 1 = original, above 1 = vivid.

.vivid   { filter: saturate(2); }
.muted   { filter: saturate(0.3); }

filter: hue-rotate()

Rotates the hue wheel by a given angle — shifts all colors around the color wheel.

.hue-shifted {
  filter: hue-rotate(90deg);
}

@keyframes rainbow {
  to { filter: hue-rotate(360deg); }
}

filter: sepia()

Applies a warm, vintage sepia tone. 0 = original, 1 = full sepia.

.vintage {
  filter: sepia(0.8) brightness(1.1);
}

filter: drop-shadow()

Like box-shadow but follows the element's actual rendered shape (including transparent areas). Ideal for irregular PNG images.

.icon {
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.4));
}

Combining Multiple Filters

Chain multiple filter functions by separating with spaces. They are applied in left-to-right order:

img {
  filter: brightness(0.9) contrast(1.1) saturate(1.2);
}

.dramatic {
  filter: grayscale(0.3) contrast(1.4) brightness(1.1);
}

filter Creates a Stacking Context

Applying filter to an element creates a new stacking context. This can cause child elements' position: fixed to behave like position: absolute — a common bug.

Quick Check

Which CSS filter function applies a Gaussian blur to an element?

Recap

The filter property applies photographic adjustments: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), and drop-shadow(). Chain multiple functions with spaces. Remember that filter creates a stacking context, which may affect fixed-position children.

Frequently asked questions

Is the “filter: blur brightness contrast grayscale” lesson free?

Yes — the full text of “filter: blur brightness contrast grayscale” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “filter: blur brightness contrast grayscale”?

Apply photographic filter effects to elements using the CSS filter property functions. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “filter: blur brightness contrast grayscale” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. filter: blur brightness contrast grayscale
  2. backdrop-filter for Frosted Glass
  3. mix-blend-mode for Layer Blending
  4. isolation Property
← Back to CSS Academy