CSS Filter Guide
The CSS filter property applies visual effects to an element — blur, brightness, contrast, and color adjustments that work on images, backgrounds, and even video. Unlike image editors, filters run in the browser, so they stay crisp at any resolution and can animate smoothly with transitions.
Drag the sliders to stack multiple filter functions in one chain. The sample scene updates in real time, and the generated code combines everything into a single filter declaration ready for your stylesheet.
Pro Tips
- Filters stack left to right. Order matters: grayscale after sepia gives a different result than sepia after grayscale. Experiment with the order for vintage photo looks.
- For hover effects, pair filter with a transition: img:hover { filter: brightness(1.15) }. The GPU-accelerated property animates at 60fps.
Frequently Asked Questions
Q: Which CSS filter functions exist?
Which CSS filter functions exist? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and drop-shadow(). You can chain any number in one filter property.
Q: Is CSS filter GPU-accelerated?
Is CSS filter GPU-accelerated? Yes. Most filter functions run on the GPU and animate at 60fps. blur() and drop-shadow() are the heaviest; use them sparingly on large elements.
Q: Does filter affect layout?
Does filter affect layout? No. Filters are purely visual — the element keeps its original size and position in the document flow. Use transform for size changes.
Q: Can I animate filters?
Can I animate filters? Yes. Transition or keyframe-animate the filter property. Animating between different filter chains of the same length interpolates smoothly.
Q: How do I make an image grayscale and color on hover?
How do I make an image grayscale and color on hover? Use two states: img { filter: grayscale(100%); transition: filter .4s; } and img:hover { filter: grayscale(0); }. A classic portfolio pattern.
CSS Named Colors & Color Psychology
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.