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. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
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.
<div class="frosted"></div>
<div class="hero-bg"></div>
filter: brightness()
Adjusts brightness. 1 = original, 0 = black, 2 = twice as bright.
<div class="dimmed"></div>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="120" height="120" alt="sample" />
filter: contrast()
Adjusts contrast. 1 = original, 0 = flat gray, values above 1 increase contrast.
<div class="high-contrast"></div>
<div class="low-contrast"></div>
filter: grayscale()
Converts to grayscale. 0 = full color, 1 (or 100%) = completely gray.
<div class="grayscale"></div>
<div class="portfolio-item"></div>
filter: saturate()
Adjusts color saturation. 0 = gray, 1 = original, above 1 = vivid.
<div class="vivid"></div>
<div class="muted"></div>
filter: hue-rotate()
Rotates the hue wheel by a given angle — shifts all colors around the color wheel.
<div class="hue-shifted"></div>
<div class="rainbow-demo"></div>
filter: sepia()
Applies a warm, vintage sepia tone. 0 = original, 1 = full sepia.
<div class="vintage"></div>
filter: drop-shadow()
Like box-shadow but follows the element's actual rendered shape (including transparent areas). Ideal for irregular PNG images.
<div class="icon">★</div>
Combining Multiple Filters
Chain multiple filter functions by separating with spaces. They are applied in left-to-right order:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" width="150" height="100" alt="photo" />
<div class="dramatic"></div>
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.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
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. 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. The CSS Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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
- filter: blur brightness contrast grayscale
- backdrop-filter for Frosted Glass
- mix-blend-mode for Layer Blending
- isolation Property