Last updated
Basic Image Adjustments
The Image Filters Effects tool applies photo filters and adjustments in the browser. Here are the fundamental adjustments with their CSS filter equivalents:
/* CSS filter functions — all adjustable in the tool */
/* Brightness: 0 = black, 1 = original, 2 = double brightness */
filter: brightness(1.2); /* 20% brighter */
filter: brightness(0.8); /* 20% darker */
/* Contrast: 0 = gray, 1 = original, 2 = high contrast */
filter: contrast(1.3); /* 30% more contrast */
filter: contrast(0.7); /* 30% less contrast */
/* Saturation: 0 = grayscale, 1 = original, 2 = double saturation */
filter: saturate(1.5); /* 50% more saturated */
filter: saturate(0); /* grayscale */
/* Hue rotation: shifts all colors around the color wheel */
filter: hue-rotate(90deg); /* rotate hues 90 degrees */
filter: hue-rotate(180deg); /* invert hues */
/* Sharpness */
filter: contrast(1.1) brightness(1.05); /* subtle sharpening effect */
/* Blur */
filter: blur(4px); /* soft focus / depth of field effect */
/* Combining multiple adjustments */
filter: brightness(1.1) contrast(1.2) saturate(1.3);
/* Slightly brighter, more contrast, more vivid colors */Popular Instagram-Style Filters
Here are the CSS filter combinations that recreate popular social media filter aesthetics:
/* Warm golden hour filter */
filter: brightness(1.1) contrast(1.1) saturate(1.3) sepia(0.2);
/* Warm, golden tones — great for food and lifestyle photos */
/* Cool/moody filter */
filter: brightness(0.9) contrast(1.2) saturate(0.8) hue-rotate(200deg);
/* Cool blue tones — great for architecture and urban photography */
/* Vintage/faded filter */
filter: brightness(1.05) contrast(0.85) saturate(0.7) sepia(0.3);
/* Faded, nostalgic look — great for portraits and travel */
/* High contrast black and white */
filter: grayscale(1) contrast(1.4) brightness(1.1);
/* Dramatic B&W — great for portraits and street photography */
/* Soft matte filter */
filter: brightness(1.05) contrast(0.9) saturate(0.9);
/* Soft, muted tones — popular for fashion and lifestyle */
/* Vibrant/punchy filter */
filter: brightness(1.05) contrast(1.15) saturate(1.6);
/* Bold, vivid colors — great for nature and product photos */
/* Cinematic teal and orange */
/* (requires Canvas API for split-toning — not achievable with CSS alone) */
Shadows: teal (#008080)
Highlights: orange (#FF8C00)
/* Creates the Hollywood blockbuster color grade */Color Grading — Shadows, Midtones, Highlights
Professional color grading adjusts shadows, midtones, and highlights independently:
/* Color grading concepts */
Shadows (dark areas):
Lift shadows → adds gray to blacks (faded/matte look)
Tint shadows blue → cool, cinematic feel
Tint shadows teal → popular "teal and orange" grade
Midtones (middle tones):
Increase midtone brightness → overall brighter image
Tint midtones warm → golden hour feel
Tint midtones cool → clean, modern look
Highlights (bright areas):
Reduce highlights → recover blown-out areas
Tint highlights orange/yellow → warm, sunny feel
Tint highlights blue → cool, airy feel
/* Common color grades */
"Warm and cozy" (food, lifestyle):
Shadows: slight orange lift
Midtones: +10% brightness, warm tint
Highlights: slight yellow tint
Saturation: +20%
"Clean and professional" (corporate, product):
Shadows: neutral
Midtones: neutral, +5% brightness
Highlights: slight cool tint
Saturation: -10% (slightly desaturated)
"Moody and dramatic" (fashion, editorial):
Shadows: deep, slightly teal
Midtones: -10% brightness
Highlights: orange/warm
Contrast: +20%Artistic Effects
Beyond color adjustments, the tool applies artistic effects:
/* Vignette effect — darkens edges to focus on center */
/* Implemented with radial gradient overlay */
background: radial-gradient(
ellipse at center,
transparent 60%,
rgba(0,0,0,0.5) 100%
);
/* Strength: 0 (none) to 1 (heavy) */
/* Film grain effect */
/* Adds texture that mimics analog film */
Grain amount: 20-40 (subtle) / 60-80 (heavy)
/* Creates organic, non-digital feel */
/* Glow / soft focus */
filter: blur(0px); /* original */
/* Blend blurred version at low opacity over original */
/* Creates dreamy, soft-focus portrait effect */
/* Pixelate / mosaic */
/* Reduces resolution to create blocky pixel art effect */
Pixel size: 4px (subtle) / 16px (obvious) / 64px (heavy)
/* Duotone effect */
/* Replaces all colors with two-color gradient */
Shadow color: #1a1a2e (dark navy)
Highlight color: #e94560 (coral red)
/* Creates bold, graphic poster aesthetic */
/* Halftone effect */
/* Simulates newspaper/comic book printing dots */
Dot size: 2px (fine) / 6px (medium) / 12px (coarse)Batch Filter Application for Consistent Branding
Apply the same filter to all images in a campaign for visual consistency:
/* Brand filter preset — save and reapply */
Filter name: "Brand Warm"
Settings:
Brightness: 1.05
Contrast: 1.10
Saturation: 1.20
Warmth: +15 (slight orange tint)
Vignette: 0.15 (subtle)
/* Apply to entire product catalog */
Input: 100 product photos (various lighting conditions)
Output: 100 consistently styled photos
/* Before/after comparison */
Before: Inconsistent lighting, mixed color temperatures
After: Consistent warm tone, unified visual style
/* CSS implementation for web */
.product-image {
filter: brightness(1.05) contrast(1.10) saturate(1.20);
/* Apply filter in CSS instead of baking into image */
/* Advantage: can change filter without re-exporting images */
}
/* Performance note */
/* CSS filters are GPU-accelerated — no performance penalty */
/* Baking filters into images reduces CSS complexity */
/* Choose based on whether filter needs to change dynamically */