CSS Filters
Transform images and elements with Instagram-like effects using pure CSS
Basic Filter Functions
CSS filters provide graphical effects like blur, colour shifting, and more. Apply them to any element for instant visual transformation.
Blur & Brightness
Original
blur(5px)
brightness(1.5)
brightness(0.5)
/* Blur effect */
.blur {
filter: blur(5px);
}
/* Brightness adjustment */
.bright {
filter: brightness(1.5); /* 150% */
}
.dark {
filter: brightness(0.5); /* 50% */
}Contrast & Grayscale
contrast(2)
contrast(0.5)
grayscale(1)
grayscale(0.5)
/* Contrast adjustment */
.high-contrast {
filter: contrast(200%);
}
/* Grayscale conversion */
.grayscale {
filter: grayscale(100%);
}
/* Partial grayscale */
.desaturated {
filter: grayscale(50%);
}Hue Rotate & Invert
hue-rotate(90deg)
hue-rotate(180deg)
invert(1)
invert(0.5)
/* Hue rotation */
.hue-shift {
filter: hue-rotate(90deg);
}
/* Colour inversion */
.invert {
filter: invert(100%);
}
/* Partial inversion */
.semi-invert {
filter: invert(50%);
}Saturate & Sepia
saturate(2)
saturate(0.5)
sepia(1)
sepia(0.5)
/* Saturation control */
.vibrant {
filter: saturate(200%);
}
.muted {
filter: saturate(50%);
}
/* Sepia tone */
.vintage {
filter: sepia(100%);
}Advanced Filter Techniques
Combine multiple filters and use special effects to create unique visual styles.
Drop Shadow
Basic Shadow
Colour Shadow
Multiple Shadows
/* Drop shadow (follows alpha) */
.shadow {
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
}
/* Coloured shadow */
.glow {
filter: drop-shadow(0 0 20px #3b82f6);
}
/* Multiple shadows */
.multi {
filter:
drop-shadow(5px 5px 5px rgba(0,0,0,0.3))
drop-shadow(-5px -5px 5px rgba(255,255,255,0.3));
}Combined Filters
Vintage
Cool Tone
Warm Tone
Dramatic
/* Instagram-like filters */
.vintage {
filter:
contrast(1.2)
brightness(1.1)
sepia(0.3)
saturate(1.4);
}
.cool {
filter:
brightness(1.1)
hue-rotate(180deg)
saturate(0.7);
}
.dramatic {
filter:
contrast(1.5)
brightness(0.9)
grayscale(0.3);
}SVG Filters
/* Reference SVG filter */
.goo-effect {
filter: url(#goo);
}
/* SVG filter definition */
Interactive Filter Playground
Experiment with different filter combinations in real-time!
Adjust Filters
.element {
filter: none;
}Creative Filter Effects
Push the boundaries with creative filter applications and animations.
Hover Effects
/* Hover transitions */
.card {
transition: filter 0.3s ease;
}
.card:hover {
filter: brightness(1.1) saturate(1.2);
}
/* Focus effect */
.gallery img {
filter: grayscale(1) brightness(0.7);
transition: filter 0.3s;
}
.gallery img:hover {
filter: grayscale(0) brightness(1);
}Animated Filters
/* Animated filters */
@keyframes pulse-brightness {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.3); }
}
@keyframes hue-cycle {
to { filter: hue-rotate(360deg); }
}
.animated {
animation: hue-cycle 5s linear infinite;
}Text Effects
Shadow Text
Glowing Text
Blurred Text
/* Text with filters */
.shadow-text {
filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5));
}
.glow-text {
filter:
drop-shadow(0 0 10px #3b82f6)
drop-shadow(0 0 20px #3b82f6);
}
.blur-text {
filter: blur(2px);
transition: filter 0.3s;
}
.blur-text:hover {
filter: blur(0);
}Filter Best Practices
Performance
Filters can be GPU-intensive. Test performance, especially on mobile devices.
Subtlety is Key
Often, subtle filter effects work better than dramatic ones for professional designs.
Accessibility
Ensure filtered content remains readable and doesn't rely solely on colour.
Browser Support
Most filters have excellent support, but always test in target browsers.