Filters
CSS filters apply graphical effects like blur, brightness, and contrast to elements.
Demo: Filter Examples
HTML
<div class="grid-filters">
<div class="filter-card">
<div class="box original">Original</div>
</div>
<div class="filter-card">
<div class="box blurred">Blur(2px)</div>
</div>
<div class="filter-card">
<div class="box brightness">Brightness(1.5)</div>
</div>
<div class="filter-card">
<div class="box grayscale">Grayscale(1)</div>
</div>
<div class="filter-card">
<div class="box sepia">Sepia(0.8)</div>
</div>
<div class="filter-card">
<div class="box invert">Invert(1)</div>
</div>
</div> CSS
.grid-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-card { text-align: center; }
.box {
width: 100px;
height: 80px;
background: linear-gradient(135deg, #6366f1, #ec4899);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.7rem;
border-radius: 6px;
margin-bottom: 4px;
}
.blurred { filter: blur(2px); }
.brightness { filter: brightness(1.5); }
.grayscale { filter: grayscale(1); }
.sepia { filter: sepia(0.8); }
.invert { filter: invert(1); }Live Output Window
Available Filter Functions
| Filter | Effect |
|---|---|
blur(px) | Gaussian blur |
brightness(%) | Adjust brightness |
contrast(%) | Adjust contrast |
grayscale(%) | Convert to grayscale |
sepia(%) | Apply sepia tone |
hue-rotate(deg) | Rotate colors |
invert(%) | Invert colors |
saturate(%) | Adjust saturation |
opacity(%) | Adjust transparency |
drop-shadow(...) | Add a shadow (respects shape) |
Drop Shadow vs Box Shadow
Demo: drop-shadow vs box-shadow
HTML
<div class="shadow-compare">
<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpolygon points=%2250,10 90,90 10,90%22 fill=%22%236366f1%22/%3E%3C/svg%3E" width="80" height="80">
</div> CSS
.shadow-compare {
display: flex;
gap: 16px;
align-items: center;
}
img {
filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.3));
}Live Output Window
drop-shadow follows the actual shape (including transparency), while box-shadow follows the bounding box.