{"id":28213,"date":"2016-10-14T23:01:55","date_gmt":"2016-10-14T15:01:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28213"},"modified":"2018-04-09T16:57:18","modified_gmt":"2018-04-09T08:57:18","slug":"code-generators-instagram-filters","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/","title":{"rendered":"Free CSS Code Generator For Instagram-Style Filters"},"content":{"rendered":"<p>How cool would it be to add image filters onto your site? Years ago this would\u2019ve required JavaScript but nowadays you can build custom image filters with good old HTML and CSS.<\/p>\n<p>And with the <a target=\"_blank\" href=\"https:\/\/www.cssfilters.co\/\">cssFilters webapp<\/a> you don\u2019t even have to write any of the CSS code!<\/p>\n<p>This free tool helps you build custom image filters using CSS3 filters. You can find <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/filter\/\">many guides<\/a> that cover the CSS filter property in detail. But with cssFilters you won\u2019t need to worry how it all works, you simply customize your settings and copy the code.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-code-generator-web-apps\/\">10 Best CSS Code Generators for Web Developers<\/a>\n\t\t\t\t<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/www.cssfilters.co\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg\" alt=\"cssfilters webapp screenshot\"><\/a><\/p>\n<p>At the top of the screen you\u2019ll notice a long bar full of custom Instagram filters. These filters include all the popular choices like Hudson, Toaster, Inkwell, Lofi and many others.<\/p>\n<p>You simply click whichever filter you want and then click the \u201cCSS code\u201d tab in the upper-right corner. From there you\u2019ll get both the HTML and CSS code. Just copy\/paste into your website and you\u2019re good to go.<\/p>\n<p>But you can also customize these filters with the settings sliders. Under the \u201cgenerator\u201d tab you can alter settings like saturation & contrast along with blur, grayscale, sepia and even the overlay style like a linear gradient or radial gradient.<\/p>\n<p>Each time you move a slider it auto-updates the code so you don\u2019t have to save anything.<\/p>\n<p>And you can even swap the default image by uploading one from your computer or choosing one from Unsplash.<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/www.cssfilters.co\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/02-select-image-unsplash-photos.jpg\" alt=\"unsplash photo picker\"><\/a><\/p>\n<p>This webapp was made by <a href=\"https:\/\/twitter.com\/_ighosh\">Indrashish Ghosh<\/a> and it runs many of the default classes found in the <a href=\"https:\/\/una.im\/CSSgram\/\">CSSgram library<\/a>.<\/p>\n<p>But the custom settings go far beyond the basic presets, and the free code generation makes this a handy tool for coders and non-coders alike. We already have many CSS3 generators for properties like background gradients and text shadows. And now we have <a target=\"_blank\" href=\"https:\/\/www.cssfilters.co\/\">cssFilters<\/a> as the premiere CSS3 image filter generator.<\/p>","protected":false},"excerpt":{"rendered":"<p>How cool would it be to add image filters onto your site? Years ago this would\u2019ve required JavaScript but nowadays you can build custom image filters with good old HTML and CSS. And with the cssFilters webapp you don\u2019t even have to write any of the CSS code! This free tool helps you build custom&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Free CSS Code Generator For Instagram-Style Filters - Hongkiat<\/title>\n<meta name=\"description\" content=\"How cool would it be to add image filters onto your site? Years ago this would&#039;ve required JavaScript but nowadays you can build custom image filters with\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free CSS Code Generator For Instagram-Style Filters\" \/>\n<meta property=\"og:description\" content=\"How cool would it be to add image filters onto your site? Years ago this would&#039;ve required JavaScript but nowadays you can build custom image filters with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-14T15:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:57:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Free CSS Code Generator For Instagram-Style Filters\",\"datePublished\":\"2016-10-14T15:01:55+00:00\",\"dateModified\":\"2018-04-09T08:57:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/\"},\"wordCount\":321,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-generators-instagram-filters\\\/01-cssfilters-homepage-screenshot.jpg\",\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/\",\"name\":\"Free CSS Code Generator For Instagram-Style Filters - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-generators-instagram-filters\\\/01-cssfilters-homepage-screenshot.jpg\",\"datePublished\":\"2016-10-14T15:01:55+00:00\",\"dateModified\":\"2018-04-09T08:57:18+00:00\",\"description\":\"How cool would it be to add image filters onto your site? Years ago this would've required JavaScript but nowadays you can build custom image filters with\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-generators-instagram-filters\\\/01-cssfilters-homepage-screenshot.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/code-generators-instagram-filters\\\/01-cssfilters-homepage-screenshot.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/code-generators-instagram-filters\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Free CSS Code Generator For Instagram-Style Filters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Free CSS Code Generator For Instagram-Style Filters - Hongkiat","description":"How cool would it be to add image filters onto your site? Years ago this would've required JavaScript but nowadays you can build custom image filters with","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/","og_locale":"en_US","og_type":"article","og_title":"Free CSS Code Generator For Instagram-Style Filters","og_description":"How cool would it be to add image filters onto your site? Years ago this would've required JavaScript but nowadays you can build custom image filters with","og_url":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-10-14T15:01:55+00:00","article_modified_time":"2018-04-09T08:57:18+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Free CSS Code Generator For Instagram-Style Filters","datePublished":"2016-10-14T15:01:55+00:00","dateModified":"2018-04-09T08:57:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/"},"wordCount":321,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg","keywords":["CSS","CSS Tools"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/","url":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/","name":"Free CSS Code Generator For Instagram-Style Filters - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg","datePublished":"2016-10-14T15:01:55+00:00","dateModified":"2018-04-09T08:57:18+00:00","description":"How cool would it be to add image filters onto your site? Years ago this would've required JavaScript but nowadays you can build custom image filters with","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/code-generators-instagram-filters\/01-cssfilters-homepage-screenshot.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/code-generators-instagram-filters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Free CSS Code Generator For Instagram-Style Filters"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7l3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28213"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28213\/revisions"}],"predecessor-version":[{"id":41860,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28213\/revisions\/41860"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28213"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}