filter
Applies visual effects such as brightness, grayscale, and color adjustments to elements. Affects the entire rendered result including child elements, while backdrop-filter applies effects only to the background behind the element.
Class List
| Class | CSS | Description |
|---|---|---|
filterb5px | filter: blur(5px) | Background blur 5px |
filterbr150p | filter: brightness(150%) | Brightness 150% (brighter) |
filterbr80p | filter: brightness(80%) | Brightness 80% (darker) |
filterc120p | filter: contrast(120%) | Contrast 120% (sharp) |
filterc80p | filter: contrast(80%) | Contrast 80% (soft) |
filterg100p | filter: grayscale(100%) | Full grayscale |
filterg50p | filter: grayscale(50%) | 50% grayscale |
filterhr90deg | filter: hue-rotate(90deg) | Hue rotation 90deg |
filterhr180deg | filter: hue-rotate(180deg) | Hue rotation 180deg |
filteri100p | filter: invert(100%) | Color inversion (negative) |
filtero50p | filter: opacity(50%) | Opacity 50% |
filtersa200p | filter: saturate(200%) | Saturation 200% (vivid colors) |
filters50p | filter: sepia(50%) | Sepia effect. 100% is full sepia |
filterds2px4px8px000000 | filter: drop-shadow(2px 4px 8px #000000) | Drop shadow |
filterinh | filter: inherit | Inherit parent filter |
filteru | filter: unset | Reset filter |
filtern | filter: none | Inherit parent filter |
filterinit | filter: initial | Reset filter |
bfb5px | backdrop-filter: blur(5px) | Background blur 5px |
bfb12px | backdrop-filter: blur(12px) | Background blur 12px |
Pattern Structure
Filter classes consist of filter function abbreviation + value + unit.
| Prefix | Function | Unit | Example |
|---|---|---|---|
filterb | blur() | px, rem, em | filterb5px, filterb2rem, filterb0-5em |
filterbr | brightness() | p (%) | filterbr120p, filterbr150p, filterbr80p |
filterc | contrast() | p (%) | filterc80p, filterc120p, filterc200p |
filterg | grayscale() | p (%) | filterg100p, filterg50p, filterg0p |
filterhr | hue-rotate() | deg, rad, turn | filterhr90deg, filterhr180deg, filterhr270deg |
filteri | invert() | p (%) | filteri100p, filteri50p |
filtero | opacity() | p (%) | filtero50p, filtero80p |
filtersa | saturate() | p (%) | filtersa200p, filtersa50p |
filters | sepia() | p (%) | filters50p, filters100p |
filterds | drop-shadow() | px + HEX | filterds2px4px8px000000 |
filterinh | filter: inherit | None | filterinh |
filteru | filter: unset | None | filteru |
filtern | filter: none | None | filtern |
filterinit | filter: initial | None | filterinit |
bfb | backdrop-filter: blur() | px | bfb5px, bfb12px |
bfbr | backdrop-filter: brightness() | p (%) | bfbr80p, bfbr120p |
Visual Comparison
Compares the effect of each filter on elements.
Original —
No filter. Reference for comparison.
Brightness 150% — filterbr150p
filterbr150p: Increased brightness. Overall brighter.
Brightness 50% — filterbr50p
filterbr50p: Decreased brightness. Overall darker.
Grayscale — filterg100p
filterg100p: Full grayscale. Color information is removed.
Contrast — filterc200p
filterc200p: Enhanced contrast. Bright areas are brighter and dark areas are darker.
Hue Rotate — filterhr90deg
filterhr90deg: 90deg hue rotation. All colors are shifted.
Invert — filteri100p
filteri100p: Color inversion. Negative effect.
Saturate — filtersa200p
filtersa200p: 200% saturation. Colors become more vivid.
Opacity — filtero50p
filtero50p: 50% opacity. Semi-transparent effect.
Filter Details
filterbfilter: blur()
Use the filterb prefix to apply blur effects. Units are flexible: px, rem, em, etc. Example: filterb5px, filterb0-5rem
<!-- Blur effect -->
<div class="filterb5px">Blurred content (5px)</div>
<!-- Various blur strengths -->
<div class="filterb2px">Subtle blur (2px)</div>
<div class="filterb10px">Strong blur (10px)</div>
<div class="filterb0-5rem">Blur with rem (0.5rem)</div>Key Classes
filterb2px | filter: blur(2px) |
filterb5px | filter: blur(5px) |
filterb10px | filter: blur(10px) |
filterb0-5rem | filter: blur(0.5rem) |
filterb2rem | filter: blur(2rem) |
filterbrfilter: brightness()
Adjusts element brightness. 100% is the original; above is brighter, below is darker. Useful for image hover effects and dark mode adjustments.
<!-- Dark overlay effect -->
<img class="filterbr50p" src="hero.jpg" />
<!-- Increase brightness on hover -->
<img class="filterbr80p hover-filterbr100p tall200msease cp" src="..." />
<!-- Bright highlight -->
<div class="filterbr150p">Brightened area</div>Key Classes
filterbr50p | filter: brightness(50%) |
filterbr80p | filter: brightness(80%) |
filterbr100p | filter: brightness(100%) |
filterbr120p | filter: brightness(120%) |
filterbr150p | filter: brightness(150%) |
filterbr200p | filter: brightness(200%) |
filtergfilter: grayscale()
Converts elements to grayscale. 100% is full grayscale, 0% is original colors. Commonly used for inactive state display and color restoration on hover.
<!-- Grayscale image (color restored on hover) -->
<img class="filterg100p hover-filterg0p tall300msease cp" src="..." />
<!-- Disabled state indicator -->
<div class="filterg100p o50">Disabled Status</div>
<!-- Partial grayscale -->
<img class="filterg50p" src="..." />Key Classes
filterg0p | filter: grayscale(0%) |
filterg25p | filter: grayscale(25%) |
filterg50p | filter: grayscale(50%) |
filterg75p | filter: grayscale(75%) |
filterg100p | filter: grayscale(100%) |
filterdsfilter: drop-shadow()
Adds a shadow that follows the actual shape of the element. Unlike box-shadow, it ignores transparent areas and generates shadows matching the content shape. Useful for PNG icons, SVGs, etc.
Pattern
filterds{X}px{Y}px{blur}px{HEX6}<!-- Shadow on icon -->
<svg class="filterds2px4px8px000000">...</svg>
<!-- Shadow following shape of PNG image -->
<img class="filterds4px4px10px000000" src="logo.png" />
<!-- Colored shadow -->
<div class="filterds2px4px8px6366F1">Indigo shadow</div>Example Classes
filterds2px2px4px000000 | filter: drop-shadow(2px 2px 4px #000000) |
filterds2px4px8px000000 | filter: drop-shadow(2px 4px 8px #000000) |
filterds4px4px10px6366F1 | filter: drop-shadow(4px 4px 10px #6366F1) |
filterds0px0px8px000000 | filter: drop-shadow(0px 0px 8px #000000) |
bf*backdrop-filter
Applies filters to the background behind the element, not the element itself. Essential for glassmorphism (glass effect) implementation. Uses the same function abbreviations as filter after the bf prefix.
<!-- Glassmorphism (glass effect) -->
<div class="bfb12px bg255-255-255-10 br12px p2rem">
Glass effect overlay with blurred background
</div>
<!-- Dark glass -->
<div class="bfb10px bg0-0-0-50 br8px p2rem cFFFFFF">
Semi-transparent dark overlay
</div>
<!-- Glass effect on header -->
<header class="pf t0 l0 w100p bfb12px bg0-0-0-30 py12px px2rem zi100">
<nav>Navigation</nav>
</header>Key Classes
bfb5px | backdrop-filter: blur(5px) |
bfb10px | backdrop-filter: blur(10px) |
bfb12px | backdrop-filter: blur(12px) |
bfb2rem | backdrop-filter: blur(2rem) |
bfbr80p | backdrop-filter: brightness(80%) |
bfbr120p | backdrop-filter: brightness(120%) |
Hover Combinations
Combined with transition, you can create smooth filter transition effects.
<!-- Grayscale → color (portfolio) -->
<img class="filterg100p hover-filterg0p tall300msease cp" src="..." />
<!-- Brightness adjustment (gallery) -->
<img class="filterbr80p hover-filterbr110p tall200msease cp" src="..." />
<!-- Saturation adjustment -->
<img class="filtersa50p hover-filtersa200p tall300msease cp" src="..." />
<!-- Invert → original -->
<img class="filteri100p hover-filteri0p tall300msease cp" src="..." />| Class Combination | Effect |
|---|---|
filterg100p hover-filterg0p tall300msease | Grayscale to color transition (portfolio, team intro) |
filterbr80p hover-filterbr110p tall200msease | Dark to bright (image gallery) |
filtersa50p hover-filtersa200p tall300msease | Low to high saturation (image emphasis) |
filteri100p hover-filteri0p tall300msease | Inverted to original (interactive effect) |
o50 hover-o100 filterg100p hover-filterg0p tall300msease | Fade + grayscale removal combination |
drop-shadow vs box-shadow
filterds(drop-shadow) and box-shadow both add shadows, but apply them differently.
| drop-shadow (filterds) | box-shadow | |
|---|---|---|
| Applied to | Actual shape of content (ignores transparent areas) | Element box (based on border-box) |
| Transparent PNG/SVG | Generates shadow following the shape | Shadow based on rectangular box |
| Inset support | Not possible | Possible (inner shadow) |
| Spread support | Not possible | Possible (shadow spread) |
| Multiple application | Only possible in CSS | Multiple via comma separation |
| Common Use Cases | Shadows for icons, irregular elements | Shadows for cards, buttons, boxes |
Tips & Notes
Includes child elements
Filters apply to the element and all its children. Applying filterg100p to a parent makes children grayscale too. To blur only the background, use bfb5px(backdrop-filter).
drop-shadow follows the shape
filterds ignores transparent areas and generates shadows matching the actual content shape. More natural than box-shadow when adding shadows to PNG icons or SVGs.
Filters cannot be combined
In Atomic CSS, applying multiple filter classes to one element only applies the last value. To use multiple filters simultaneously, apply them to nested elements individually.
Performance considerations
filter and backdrop-filter use the GPU, but applying them to large or many elements can impact performance. Especially on mobile, limit backdrop-filter blur values appropriately.