{"id":2298,"date":"2017-03-13T23:10:16","date_gmt":"2017-03-13T23:10:16","guid":{"rendered":"http:\/\/cssreset.com\/?p=2298"},"modified":"2017-03-13T23:11:29","modified_gmt":"2017-03-13T23:11:29","slug":"5-best-sites-for-css-snippets","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/5-best-sites-for-css-snippets\/","title":{"rendered":"5 Best Sites for CSS Snippets"},"content":{"rendered":"<p>As a developer or designer, CSS snippets can be both creatively inspiring and a huge time saver. With snippets, you can easily add cool effects to your projects without having to write the code from scratch. The best thing about snippets is that in addition to saving you time and adding cool features and functionalities to your sites, they&#8217;re also fully customizable, so you can make any changes to the functionality or style and design of the snippets to suit the individual needs of your projects. What follows is a list of the best sites to check for free and modern CSS snippets to add to your sites.<\/p>\n<p>1. <a href=\"http:\/\/codepen.io\/\" target=\"_blank\">CodePen<\/a><\/p>\n<p><a href=\"http:\/\/codepen.io\/\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2299 aligncenter\" alt=\"Screen Shot 2017-03-14 at 9.47.27 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.47.27-AM-1024x262.png\" width=\"1024\" height=\"262\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.47.27-AM-1024x262.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.47.27-AM-300x77.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.47.27-AM-180x46.png 180w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>CodePen is one of the most popular CSS snippet sites, and for good reason. It&#8217;s a repository of thousands of user generated snippets that anyone can upload and share with the public. If you&#8217;re looking for inspiration, all you need to do is browse through the hundreds upon hundreds of pages of recently added or popular snippets. Or, if you&#8217;re looking for something specific, try searching for it. Chances are if it exists, it&#8217;s on CodePen.<\/p>\n<p>2. <a href=\"http:\/\/littlesnippets.net\/page\/2\/\" target=\"_blank\">Little Snippets<\/a><\/p>\n<p><a href=\"http:\/\/littlesnippets.net\/page\/2\/\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2300 aligncenter\" alt=\"Screen Shot 2017-03-14 at 9.56.51 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.56.51-AM-1024x402.png\" width=\"1024\" height=\"402\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.56.51-AM-1024x402.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.56.51-AM-300x118.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-9.56.51-AM-180x70.png 180w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>Little Snippets hosts a collection of over 1000 CSS snippets. The snippets on Little Snippets are very modern, stylish, and often include smooth CSS transitions. The snippets are typically image effects or hover effects that you should be able to integrate easily with any site or project.<\/p>\n<p>3. <a href=\"http:\/\/littlesnippets.net\/page\/2\/\" target=\"_blank\">The Code Player<\/a><\/p>\n<p><a href=\"http:\/\/littlesnippets.net\/page\/2\/\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2301 aligncenter\" alt=\"Screen Shot 2017-03-14 at 10.04.56 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.04.56-AM-1024x418.png\" width=\"1024\" height=\"418\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.04.56-AM-1024x418.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.04.56-AM-300x122.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.04.56-AM-180x73.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.04.56-AM.png 2036w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>The Code Player presents code snippets in a really unique way. With this site, you not only have access to dozens of unique and fun code snippets, but you can also watch the entire process of coding them. The snippets are presented interactively, so you get to see all of the code (from HTML to CSS to JavaScript) being typed out, right next to a live representation of what the code is building, so you can understand how each line of code comes together to create the final product.<\/p>\n<p>4. <a href=\"http:\/\/www.cssflow.com\/snippets\" target=\"_blank\">CSS Flow<\/a><\/p>\n<p><a href=\"http:\/\/www.cssflow.com\/snippets\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2302 aligncenter\" alt=\"Screen Shot 2017-03-14 at 10.11.57 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.11.57-AM-1024x479.png\" width=\"1024\" height=\"479\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.11.57-AM-1024x479.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.11.57-AM-300x140.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.11.57-AM-180x84.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.11.57-AM.png 1328w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>CSS Flow is a collection of super useful and simple snippets that will help you add some style and flair to common HTML elements like buttons, forms, input fields, and more. They also provide snippets for slightly more complex page functionalities, like navigation bars, pagination, and custom elements.<\/p>\n<p>5. <a href=\"http:\/\/cssdeck.com\/\" target=\"_blank\">CSS Deck<\/a><\/p>\n<p><a href=\"http:\/\/cssdeck.com\/\"><img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-2303 aligncenter\" alt=\"Screen Shot 2017-03-14 at 10.13.52 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.13.52-AM-1024x527.png\" width=\"1024\" height=\"527\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.13.52-AM-1024x527.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.13.52-AM-300x154.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.13.52-AM-180x92.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-10.13.52-AM.png 1040w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>CSS Deck is a code repository similar to CodePen, where users can upload their own code snippets and make them available to the public for their own personal use and customization.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>As a developer or designer, CSS snippets can be both creatively inspiring and a huge time saver. With snippets, you can easily add cool effects to your projects without having to write the code from scratch. The best thing about [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/5-best-sites-for-css-snippets\/\" title=\"Click to read '5 Best Sites for CSS Snippets'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2298"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2298"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2298\/revisions"}],"predecessor-version":[{"id":2305,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2298\/revisions\/2305"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2301"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}