      ![A collection of screenshots from various online CSS resources.](/sites/default/files/styles/academy_xs_1x/public/images/css-libraries_1.jpg.avif?itok=dUKSWSws)  

 23 May, 2016  //   

 1. [  Back to  Home ](/)
2. /
3. [  Back to  Resources ](/resources)
4. /
5. [  Back to  Blog ](/resources/blog)
6. /
 
 #  16 Awesome CSS Libraries and Resources 

 #Frontend 

 #HTML, CSS &amp; Javascript 

 

 

  ![Darren Fisher, Creative Director at Pivale Drupal agency - a bearded man with dark hair and glasses.](/sites/default/files/styles/square_sml_1x/public/2024-02/darren%20copy.png.avif?itok=1kn7CVTS)  *Written by*   Darren Fisher    Creative Director Darren is our creative director, responsible for our [design](/services/creative "Creative services") and frontend development team as well as managing the majority of our [website](/solutions/drupal-cms-content-management-system "Drupal CMS") and [multisite](/solutions/multi-site-management "Multi site management") builds. Darren is a graduate of the [University for the Creative Arts](https://www.uca.ac.uk/) achieving a bachelor's degree in Digital Screen Arts.

 

 

 

 

 

 Writing CSS is fun - at least I think it is. Some people loathe writing CSS but I love its quirks. CSS and I; we're tight, yo! Sometimes I feel like I'm Leo DiCaprio, CSS is Kate Winslet and it's all the other webby techy stuff that makes up the titanic ship we're sailing on that will eventually hit an iceberg and destroy our relationship forever!

CSS has come a long way over the years and is now capable of some pretty radical stuff. In fact CSS now does so much that sometimes it's easier to use CSS generators and libraries to achieve a desired effect than doing everything from scratch. Here I've pooled a list of resources and libraries that I think you'll love and will find useful when you next find yourself on a romantic stroll with CSS!

 

 

 

       ![Animate.css screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/animate-css_0.jpg.avif?itok=jXyJ8mnj)  

##  1. Animate.css 

Animate.css is a great **starter kit library for CSS animation** by [Daniel Eden](https://daneden.me/). When used conservatively, it can really give your website that classy edge. All you have to do is add a couple of classes to an HTML element or if you're all about semantic markup (like me) you can pinch snippets from the stylesheet and apply them to your own stylesheets accordingly.

 

 [Check out Animate.css ](https://animate.style/) 

 

 

 

       ![Hover.css screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/images/hover-css-copy.jpg.avif?itok=rg2LFi-i)  

##  2. Hover.css 

Similar to Animate.css, Hover.css is a stylesheet by [Ian Lunn](http://ianlunn.co.uk/) which gives you a **library of stylish hover animations**. In the world of responsive design hover states and animations are now less important than they used to be but they still give your desktop site a serious lift in class if that's the sort of thing you're looking for.

 

 [Check out Hover.css ](https://ianlunn.github.io/Hover/) 

 

 

 

       ![CSShake screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/csshake_0.jpg.avif?itok=Hht7GDxO)  

##  3. CSShake 

CSShake is another **CSS animation library for shake effects**. When I first stumbled across it I struggled to see where it would ever be useful but as time has gone on I find it increasingly enjoyable for the right projects. If you need to make something quiver, wobble or violently shake then [Lionel aka elrumordelaluz](https://elrumordelaluz.com/) is your dude!

 

 [Check out CSShake ](https://elrumordelaluz.github.io/csshake/) 

 

 

 

       ![Magic Animations screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/magic-animations_0.jpg.avif?itok=YiWX3MCE)  

##  4. Magic Animations 

This is another **great animations library for transitions** by [Christian aka minimamente](http://www.minimamente.com/). The use case for these animations are pretty narrow but when you find a need for objects to transition in this way you'll be glad to have this stylesheet in your arsenal to refer to.

 

 [Check out Magic Animations ](https://www.minimamente.com/project/magic/) 

 

 

 

       ![CSS Loaders screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/css-loaders_0.jpg.avif?itok=ymEy5feL)  

##  5. CSS Loaders 

CSS Loaders is a **nifty little collection of CSS loading animations** which are significantly more lightweight and visually more impressive than an animated gif. These come courtesy of [Luke Haas](http://lukehaas.me/) who even had the foresight to allow you to choose the colours of the loaders!

 

 [Check out CSS Loaders ](https://lukehaas.me/projects/css-loaders/) 

 

 

 

       ![Pantone Sass screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/pantone-sass_0.jpg.avif?itok=bQdFEg9K)  

##  6. Pantone Sass 

You don't have to tell me about the pain of explaining the difference between additive and subtractive colour to your clients. I used to work in print and I'd always get sent RGB files. Now I work in web and everybody wants to send me Pantone colours! Luckily [Damon Bauer](https://github.com/damonbauer) has created a **sass stylesheet which allows you to call Pantone colours via variables**!

 

 [Check out Pantone Sass ](https://damonbauer.github.io/Pantone-Sass/) 

 

 

 

       ![CSS3 Generator screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/css3-gen_0.jpg.avif?itok=l8bYyYsU)  

##  7. CSS3 Generator 

CSS3 Generator by [Randy Jensen](http://www.randyjensen.com/) does what it says on the tin: **generates CSS3 code from toggles and switches**! It's repertoire includes: border radius, box shadow, text shadow, RGBA, @Font Face, multiple columns, box resize, box sizing, outline, transition, Transform, flexbox and gradient. You just simply have to take it for a spin to see how awesome it is!

 

 [Check out CSS3 Generator ](https://css3generator.com/) 

 

 

 

       ![CSSmatic screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/cssmatic_0.jpg.avif?itok=YbwrR1tJ)  

##  8. CSSmatic 

CSSmatic is similar to CSS3 Generator but not as extensive. It **generates gradients**, **border radius**, **box shadow** and also has a really cool **noise texture tool**. CSSmatic is created by the developers over at [FreePik](http://www.freepik.com/) and [thumbr.io](http://www.thumbr.io/) which are also 2 great resources for web images.

 

 [Check out CSSmatic ](https://www.hongkiat.com/blog/css-automation-tool-cssmatic/) 

 

 

 

       ![CSS Arrow Please screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/css-arrow-please_0.jpg.avif?itok=iRVwmEtP)  

##  9. CSS Arrow Please 

CSS Arrow Please by [Simon Højberg](https://github.com/hojberg) **generates arrows which jut out from another HTML element** using CSS pseudo classes. I find myself returning to this resource all the time when coding up nav bars or when working with Pinterest style grid elements which need to link together.

 

 [Check out CSS Arrow Please ](https://cssarrowplease.com/) 

 

 

 

       ![CSS Triangle Generator screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/css-triangle-gen_0.jpg.avif?itok=b30W2ims)  

##  10. CSS Triangle Generator 

CSS Triangle Generator is a product from an unnamed Hong Kong developer which **generates CSS triangles**. It has a really simple to use interface which generates CSS code for you to copy and paste. I often find myself using this as in pseudo elements to create more advanced shapes from boring rectangular `<div>` elements!

 

 [Check out CSS Triangle Generator ](https://www.cssportal.com/css-triangle-generator/) 

 

 

 

       ![CSS Gradient Animator screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/css-gradient-animator_0.jpg.avif?itok=EIxRapy1)  

##  11. CSS Gradient Animator 

CSS Gradient Animator allows you to **generate highly complex CSS gradient animations** by playing around with sliders and buttons. The app is created by Canadian developer [Ian Forrest](https://www.ianforrest.com/) who has clearly invested a lot of time in creating the simple to use, smart-looking interface.

 

 [Check out CSS Gradient Animator ](https://www.ianforrest.com/) 

 

 

 

       ![Codepen screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/codepen_0.jpg.avif?itok=IX0mNHS9)  

##  12. Codepen 

CodePen is the single greatest resource a front end developer could wish for. For the uninitiated (if there are any) CodePen is a service which lets you write HTML, CSS and JS snippets for testing or experimentation. In the [words of Brandon Mathis](https://twitter.com/imathis/status/656451692314173440): "[@CodePen](https://twitter.com/CodePen) is the front end designer's “leave a penny take a penny” jar, but where folks might occasionally leave a corvette."

 

 [Check out Codepen ](https://codepen.io/) 

 

 

 

       ![Sass screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/sass-website_0.jpg.avif?itok=3fq2zlBO)  

##  13. Sass 

If you're not already using sass then where have you been?! Sass is a **CSS preprocessor** that allows CSS to be used like a proper programming language utilising advanced maths, variables, 'if, else' and 'for each' statements as well as mixins and nested styles. If you're uninitiated then start with [Scott Tolinski's Level Up Tuts Sass Tutorials over on youtube](https://www.youtube.com/watch?v=fbVD32w1oTo&list=PL2CB1F80266E986EA).

 

 [Check out Sass ](https://sass-lang.com/) 

 

 

 

       ![Bootstrap screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/bootstrap_0.jpg.avif?itok=I4WSQ0L2)  

##  14. Bootstrap 

Bootstrap is (in their own words) the most popular HTML, CSS, and JS framework for **developing responsive, mobile first projects** on the web. Bootstrap allows you to create smart looking, responsive websites by simply applying classes to HTML markup. This is a semantic HTML nightmare but semantics are just for idealists aren't they?! Either way, Bootstrap is a quick win in terms of design when budget or deadline is a concern.

 

 [Check out Bootstrap ](https://getbootstrap.com/) 

 

 

 

       ![Normalize.css screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/normalize-css_0.jpg.avif?itok=z1B8TFMn)  

##  15. Normalize.css 

In an ideal world browsers would all render your work in exactly the same way. Unfortunately we don't live in an ideal world; instead we live in a Kafka-esque nightmarish landscape where cross browser compatibility is about as compatible as trying to eat soup with a tea strainer. Fortunately the good chaps [Nicolas Gallagher](http://nicolasgallagher.com/) and [Jonathan Neal](https://jonneal.dev/) have created Normalize.css which essentially **resets browser quirks and aligns the base stylesheets to be in harmony**. This is different to reset.css which literally removes everything the browsers give us, which in a lot of cases we have to go ahead and re-write.

 

 [Check out Normalize.css ](https://necolas.github.io/normalize.css/) 

 

 

 

       ![Flexbox Froggy screenshot.](/sites/default/files/styles/widescreen_xs_1x/public/2023-12/flexbox-froggy_0.jpg.avif?itok=NPFkhE_V)  

##  16. Flexbox Froggy 

Finally I'll round up with something super fun! One of the major advances in CSS3 was the introduction of flexbox which gives us some serious power to mess around with the layout and order of HTML using CSS. There's a minor learning curve with flexbox but don't let that scare you because [Thomas Park](http://thomaspark.co/) has given us Flexbox Froggy: an **interactive game which teaches you flexbox** in an engaging and "Oh now I get it!" sort of way!

 

 [Check out Flexbox Froggy ](https://flexboxfroggy.com/) 

 

 

 

  ![Darren Fisher, Creative Director at Pivale Drupal agency - a bearded man with dark hair and glasses.](/sites/default/files/styles/square_sml_1x/public/2024-02/darren%20copy.png.avif?itok=1kn7CVTS)  *Written by*   Darren Fisher    Creative Director Darren is our creative director, responsible for our [design](/services/creative "Creative services") and frontend development team as well as managing the majority of our [website](/solutions/drupal-cms-content-management-system "Drupal CMS") and [multisite](/solutions/multi-site-management "Multi site management") builds. Darren is a graduate of the [University for the Creative Arts](https://www.uca.ac.uk/) achieving a bachelor's degree in Digital Screen Arts.

 

 

 

 - Facebook   Facebook
- LinkedIn   Linkedin
- Threads   Threads
- X   X
- Whatsapp   Whatsapp
- Email   Email
 
 [ Back to all articles](/resources/blog) 



 ##  Related articles 

    ![The Sass and CSS 3 logos offset in a pattern across a design grid.](/sites/default/files/styles/widescreen_xs_1x/public/images/sass-css3_1.jpg.avif?itok=hKtxSzgP)  

  Article ##  Using Sass and CSS3 Flex as a grid system 

            3 April, 2017  #Frontend 

 #HTML, CSS &amp; Javascript 

 #Tutorial 

 

We used to be big fans of using singularity to create responsive grids on which to craft our web layouts but we've been converted to CSS3 flex and here's why!

 

 [Read the article ](/resources/blog/using-sass-css3-flex-grid-system) 

 

   ![A woman photographer wearing a blue sleeveless dress takes a photograph for a free stock photography website.](/sites/default/files/styles/widescreen_xs_1x/public/images/pexels-kpaukshtite-701740%20copy.jpg.avif?itok=Q_jQL22-)  

  Article ##  15 FREE stock photography websites for high quality images 

            12 July, 2024  #Advice 

 

Looking for high quality free stock photography websites? Explore this list of our favourite open source, creative commons and free stock images websites.

 

 [Read the article ](/resources/blog/15-free-stock-photography-websites) 

 

 

 [See all articles  ](/resources/blog)