{"id":197,"date":"2026-05-05T09:17:05","date_gmt":"2026-05-05T13:17:05","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=197"},"modified":"2026-05-05T09:17:05","modified_gmt":"2026-05-05T13:17:05","slug":"instagram-filters-css","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/instagram-filters-css\/","title":{"rendered":"Instagram Filters in CSS: Clarendon, Gingham, More [2026]"},"content":{"rendered":"
TL;DR:<\/strong> Instagram’s classic filters (Clarendon, Gingham, Moon, Lark, Reyes, Juno, etc.) can be approximated in CSS by stacking filter<\/code> properties \u2014 contrast<\/code>, saturate<\/code>, hue-rotate<\/code>, sepia<\/code> \u2014 with carefully tuned values per filter. The output isn’t pixel-identical to Instagram’s proprietary algorithms, but it captures the look closely enough for previews, demo apps, and design mockups. Our free Instagram filters tool<\/a> ships 30+ filter presets, applies them to any image in your browser, and copies the equivalent CSS.<\/div>\n

Instagram launched its filter library in 2010, popularising the now-iconic looks: Clarendon (cool, high-contrast), Gingham (vintage warm), Moon (dramatic black-and-white), Lark (high-saturation outdoor), Reyes (faded warmth), Juno (warm and saturated). Instagram’s actual implementations are proprietary GPU shaders. CSS approximations using filter<\/code> functions get close to the look \u2014 close enough that web designers use them to mimic Instagram’s aesthetic in their own UIs.<\/p>\n

Our Instagram filters in CSS<\/a> tool ships 30+ tested filter approximations. Drop an image, click a filter to preview, copy the CSS or export the filtered image as PNG. Useful for: feed-style mockups, photo galleries with consistent filter looks, hover effects that mimic Instagram, demo apps showing “before\/after” filter comparisons. This guide explains how the CSS approximations work, where they fall short of Instagram’s real shaders, and the gotchas with hue-rotate.<\/p>\n

CSS approximations of classic filters<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n
Filter<\/th>\nCSS approximation<\/th>\nAesthetic<\/th>\n<\/tr>\n<\/thead>\n
Clarendon<\/strong><\/td>\ncontrast(120%) saturate(125%)<\/code><\/td>\nHigh-contrast cool tones<\/td>\n<\/tr>\n
Gingham<\/strong><\/td>\ncontrast(90%) brightness(105%) sepia(8%)<\/code><\/td>\nFaded vintage warmth<\/td>\n<\/tr>\n
Moon<\/strong><\/td>\ngrayscale(100%) contrast(110%) brightness(110%)<\/code><\/td>\nDramatic B&W<\/td>\n<\/tr>\n
Lark<\/strong><\/td>\ncontrast(95%) saturate(110%) brightness(110%)<\/code><\/td>\nOutdoor \/ nature<\/td>\n<\/tr>\n
Reyes<\/strong><\/td>\nsepia(22%) brightness(110%) contrast(85%) saturate(75%)<\/code><\/td>\nFaded warm<\/td>\n<\/tr>\n
Juno<\/strong><\/td>\nsaturate(130%) contrast(105%) hue-rotate(-10deg)<\/code><\/td>\nWarm + saturated<\/td>\n<\/tr>\n
Walden<\/strong><\/td>\nbrightness(110%) hue-rotate(-10deg) sepia(30%) saturate(160%)<\/code><\/td>\nBright yellow-tint<\/td>\n<\/tr>\n
1977<\/strong><\/td>\ncontrast(110%) brightness(110%) saturate(130%) sepia(50%)<\/code><\/td>\nFaded film, retro<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Why CSS approximations aren’t exact<\/h2>\n

Instagram’s filters are GPU shaders that operate per-pixel with custom curves, masks, and blend modes. CSS filter<\/code> functions (contrast<\/code>, saturate<\/code>, hue-rotate<\/code>, sepia<\/code>) are simpler linear or per-channel transforms. The differences:<\/p>\n