14 CSS Libraries You Should Check Out
Tags: css, beginners, tips, devjournal
Published: 2021-10-15 14:07:14

---
title: 14 CSS Libraries You Should Check Out
published: true
date: 2021-10-14 10:44:08 UTC
tags: CSS,Beginners,Tips,devjournal
canonical_url: https://blog.shahednasser.com/14-css-libraries-you-should-check-out/
cover_image: https://blog.shahednasser.com/static/84445aeea8c20b746134746a7bbea7bf/kobu-agency-ipARHaxETRk-unsplash-2.jpg
---

_This article was originally published on [my personal blog](https://blog.shahednasser.com/14-css-libraries-you-should-check-out/)._

CSS libraries can make your web development easier, as they pack in good styles into one library that you can just use in your projects without extra work from your side.

There are many CSS libraries out there, each providing its own helpful styling for your projects. In this article, we'll look at some of these libraries that provide nice or unique styling.

## [NES.css](https://nostalgic-css.github.io/NES.css/)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.20.14-PM.png)

[NES.css](https://nostalgic-css.github.io/NES.css/) is a library that falls under the unique category. It provides 8-bit styling for common UI elements. If you're developing a web game, or just want to give an 8-bit look to your website, this library is perfect for you.

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

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.22.46-PM.png)

[Animate.css](https://animate.style) is a library I have used in most of my projects. It provides you with a nice set of animation classes, and utilities to easily control these animations. It makes animation in CSS extremely easy to add to your projects, especially if you're a beginner.

## [Water.css](https://watercss.kognise.dev)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.33.55-PM.png)

[Water.css](https://watercss.kognise.dev) is a lightweight and responsive library that gives your website a simple styling. You don't need to add any specific CSS classes, it just adds the styling based on your HTML markup. This library also has a Bookmarklet that you can use on any website that doesn't have styling to add some nice styling to it.

## [Spectrum CSS](https://opensource.adobe.com/spectrum-css/index.html)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.49.15-PM.png)

[Spectrum CSS](https://opensource.adobe.com/spectrum-css/index.html) is an open-source library created by Adobe. It includes a lot of nicely styled-components including Action Bars, Accordions, Cards, Ratings, and more. The styling is based on Adobe's design system.

## [Box-shadows.css](https://madeas.github.io/box-shadows/)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.51.57-PM.png)

[Box-shadows.css](https://madeas.github.io/box-shadows/) is a library solely focused on adding box-shadows to elements. It provides different utility classes for different shades, intensities, or types of box shadows.

## [sButtons](https://github.com/sButtons/sbuttons)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.55.01-PM.png)

[sButtons](https://github.com/sButtons/sbuttons) is a library I personally developed with the help of many open-source contributors. This library provides you with many styled buttons of different types, including animated buttons, icon buttons, social login buttons, and more.

## [Hint.css](https://kushagra.dev/lab/hint/)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-5.58.16-PM.png)

[Hint.css](https://kushagra.dev/lab/hint/) is a library that you can use to add tooltips to any element. It's done with only pure CSS and it doesn't use any JavaScript. It's very small and easy to use in any of your projects.

## [CSS Icons](https://css.gg)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-12-at-6.01.04-PM.png)

[CSS Icons](https://css.gg) is a library that has 700+ icons in CSS, SVG, JSON, and more. You can add it to any of your projects regardless of what they are and it can be a very useful library.

## [Hamburgers](https://jonsuh.com/hamburgers/)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-14-at-12.41.37-PM.png)

[Hamburgers](https://jonsuh.com/hamburgers/) is a CSS library that provides you with different styles of Hamburger buttons. You can use different icons or transitions and animations. Using this library you can easily add a nice-looking Hamburger button.

## [Balloon.css](https://kazzkiq.github.io/balloon.css/)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-14-at-12.48.21-PM.png)

[Balloon.css](https://kazzkiq.github.io/balloon.css/) is another pure CSS tooltip library. Using data attributes, you'll be able to add a tooltip to elements of any length or position, and you can add some CSS classes too to change the color of the tooltip.

## [Charts.css](https://chartscss.org) 

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-14-at-12.51.45-PM.png)

[Charts.css](https://chartscss.org) is a library that allows you to visualize data in different types of charts using CSS. The library includes bar charts, line charts, column charts, and more. It can be done with their CSS classes and simple table HTML markups.

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

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-14-at-12.54.56-PM.png)

[CSShake](https://elrumordelaluz.github.io/csshake/) is a CSS library that provides classes that simply allow you to shake any element in the DOM. They have classes related to intensity, direction, type, and more.

## [flag-icons](https://flagicons.lipis.dev)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-14-at-1.07.07-PM.png)

[flag-icons](https://flagicons.lipis.dev) is a CSS library that gives you CSS classes to show flags of countries from around the world. This can save you time from finding flags to use in your website, and the flags are SVG.

## [pattern.css](https://bansal.io/pattern-css#separator)

![14 CSS Libraries You Should Check Out](https://backend.shahednasser.com/content/images/2021/10/Screen-Shot-2021-10-14-at-1.35.47-PM.png)

With [pattern.css](https://bansal.io/pattern-css#separator) you can fill the background of the page, separator, text, and image with different pattern styles using only CSS classes provided by the library.

## Conclusion

CSS libraries can help you do more with less time. It saves you time and makes your website look nicer.

The ones mentioned in this article are just some of the helpful ones that I present to you in the hopes that they help you in your upcoming projects.