Super Useful CSS Resources 🌈
Tags: css, webdev, opensource, codenewbie
Published: 2022-12-03 18:00:23

---
title: Super Useful CSS Resources 🌈
published: true
description: The ultimate list of 70+ web-based CSS tools that every frontend developer should have bookmarked!
tags: CSS, webdev, opensource, codenewbie
cover_image: https://i.ibb.co/CMxy3tz/css-resources-2.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-26 16:38 +0000
---

> A collection of 70 hand-picked, web-based tools which are actually useful.
> Each will generate pure CSS without the need for JS or any external libraries.

> <small>Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials)</small>

### Contents
- [Property Generators](#property-generators)
- [Animations](#animations)
- [Backgrounds](#backgrounds)
- [Color Tools](#colors)
- [Typography](#typography)
- [Loaders](#loaders)
- [Layouts](#layouts)
- [Informative](#informative)

## Property Generators

### 1. [Neumorphism](https://neumorphism.io)
> Generate Soft-UI CSS styles using inset shadows, by [@adamgiebl](https://github.com/adamgiebl)

![screenshot](https://i.ibb.co/vPH0YMV/32-neumorphism.gif)

### 2. [Shaddows Brumm](https://shadows.brumm.af/)
> Make and preview beautifully smooth shadows, by [@brumm](https://github.com/brumm)

![screenshot](https://i.ibb.co/vD2rd3G/25-shadows-brum.gif)

### 3. [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)
> Generate cool shaped objects with border-radius, by [@9Elements](https://github.com/9elements). Similar to [BlobMaker](https://www.blobmaker.app/)

![screenshot](https://i.ibb.co/0KQPHHh/35-fancy-border-radius.gif)

### 4. [Glow Generator](https://cssbud.com/css-generator/css-glow-generator/)
> Generate pure CSS, cross-browser glow effects

![screenshot](https://i.ibb.co/DDfw0Mz/54-glow-generator.gif)

### 5. [Clothoid Corners](https://onotakehiko.dev/clothoid/)
> Generates clothoid rounded corners by CSS clip-path, by [Takehiko Ono](https://onotakehiko.com/)

![screenshot](https://i.ibb.co/HHR644q/33-clothoid.gif)

### 6. [Glassmorphism](https://hype4.academy/tools/glassmorphism-generator)
> Build semi-transparent, blurred glass-like backgrounds. Similar to [ui.glass/generator](https://ui.glass/generator/)

![screenshot](https://i.ibb.co/89R9Ckp/55-css-glow.gif)

### 7. [Clipy](https://bennettfeely.com/clippy/)
> Generate complex shaped objects using clip-path, by [@bennettfeely](https://github.com/bennettfeely)

![screenshot](https://i.ibb.co/fHjj3FP/34-clippy.gif)

### 8. [CSS Filters](https://www.cssfilters.co/)
> Generate and preview pure CSS Instagram-style photo filters, by [@ghosh](https://github.com/ghosh)

![screenshot](https://i.ibb.co/4Nwr01c/37-cssfilters.gif)

### 9. [Base64 Image](https://www.base64-image.de/)
> Encode an image directly in your CSS in Base64

![screenshot](https://i.ibb.co/FgTRfQd/38-base64-image.gif)

### 10. [Quantity Queries](https://quantityqueries.com/)
> Generate quantity-based CSS queries, by [@drewminns](https://github.com/drewminns)

![screenshot](https://i.ibb.co/wK77hT7/39-quantityqueries.png)

---

## Animations

### 11. [Animista](https://animista.net/play)
> CSS animation playground and generator, by [Ana T](https://www.linkedin.com/in/anatravas)

![screenshot](https://i.ibb.co/zQ0y2mk/1-animista.gif)

### 12. [Cubic-Bezier](https://cubic-bezier.com/)
> Preview and generate advanced cubic bezier animations, by [@LeaVerou](https://github.com/LeaVerou)

![screenshot](https://i.ibb.co/bLHhQ41/2-cubic-besier.gif)

### 13. [Keyframes](https://keyframes.app/animate)
> Advanced keyframe animation maker, by [@mitchas](https://github.com/mitchas)

![screenshot](https://i.ibb.co/dK3Lxgr/3-keyframes.png)

### 14. [Wait Animate](https://waitanimate.wstone.uk/)
> Use animation-delay to simulate delays, by [@will-stone](https://github.com/will-stone)

![screenshot](https://i.ibb.co/NZPMwf8/4-waitanimate.png)

### 15. [Transition.Style](https://www.transition.style)
> Copy-paste transition animations, by [@argyleink](https://github.com/argyleink)

![screenshot](https://i.ibb.co/YPwRgVW/5-transition.gif)

---

## Backgrounds

### 16. [Hero Patterns](https://heropatterns.com/)
> Find and customize simple pure-CSS patterned backgrounds, by [@steveschoger](https://twitter.com/steveschoger)

![screenshot](https://i.ibb.co/gdnKVKG/56-hero-backgrounds.gif)

### 17. [Haikei](https://app.haikei.app/)
> Generate unique organic SVG banners and backgrounds (similar to [Shape Divider](https://www.shapedivider.app/))

![screenshot](https://i.ibb.co/dQqztYV/14-haikei.gif)

### 18. [Pattern Generator](https://doodad.dev/pattern-generator/)
> Advanced pattern generator

![screenshot](https://i.ibb.co/th8khVj/15-pattern-generator.gif)

### 19. [CSS Pattern](https://css-pattern.com/)
> Collection of pre-made pure CSS patterned backgrounds, by [@Afif13](https://github.com/Afif13)

![screenshot](https://i.ibb.co/Hh37hbb/16-css-pattern.gif)

### 20. [Patternizer](https://patternizer.com)
> Build striped backgrounds, by [@matthewlein](https://twitter.com/matthewlein)

![screenshot](https://i.ibb.co/PMMQC6F/17-patternizer.png)

### 21. [Patternify](http://www.patternify.com/)
> Build your own old-school pattern, by [@SachaGreif](https://twitter.com/SachaGreif)

![screenshot](https://i.ibb.co/2P45cZT/18-patternify.gif)

### 22. [Animated BG](https://wweb.dev/resources/animated-css-background-generator/)
> Generate blurred animated pure CSS backgrounds, by [@Vincenius](https://github.com/Vincenius)

![screenshot](https://i.ibb.co/KFwrZQS/19-animated-bg.gif)

### 23. [Trianglify](https://trianglify.io/)
> Geometric background designer (note: only semmi-free), by [@qrohlf](https://github.com/qrohlf)

![screenshot](https://i.ibb.co/6F812Dd/20-trianglify.gif)

### 24. [Animated Backgrounds](https://animatedbackgrounds.me)
> Collection of pure CSS background animations

![screenshot](https://i.ibb.co/YhxFmVw/21-animatedbackgrounds.png)

### 25. [Magic Pattern CSS Backgrounds](https://www.magicpattern.design/tools/css-backgrounds)
> Collection of reusable SVG-based / pure CSS background patterns, with a visual explorer

![screenshot](https://i.ibb.co/gdnKVKG/56-hero-backgrounds.gif)

---

## Colors

### 26. [CSS Gradient](https://cssgradient.io/)
> Advanced CSS gradient builder

![screenshot](https://i.ibb.co/xJG5cCv/6-cssgradient.png)

### 27. [Parametric Mixer](https://colormixer.web.app)
> Equaliser-based CSS color composer. by [@dawidwoldu](https://twitter.com/dawidwoldu)

![screenshot](https://i.ibb.co/k6T022D/60-parametric-mixer.gif)

### 28. [Palettte.](https://palettte.app/)
> Develop and tweak color schemes

![screenshot](https://i.ibb.co/wr7Zhdz/61-palettte.gif)

### 29. [Paletton](https://paletton.com)
> Palette builder using opposing or attracting colors

![screenshot](https://i.ibb.co/qBYcsgk/7-paletton.png)

### 30. [Grabient](https://www.grabient.com/)
> Sample gradients.
> Similar to [CoolHue](https://webkul.github.io/coolhue/), [WebGradients.com](https://webgradients.com/), [GradientHunt](https://gradienthunt.com/), [GradientButtons](https://gradientbuttons.colorion.co/) and [UI gradients](https://uigradients.com)

![screenshot](https://i.ibb.co/Qj88dCZ/8-grabient.png)

### 31. [Color Hunt](https://colorhunt.co/)
> Yet another color palette designer

![screenshot](https://i.ibb.co/ZVWbL7s/9-colorhunt.png)

### 32. [Easing Gradients](https://larsenwork.com/easing-gradients/#editor)
> Cubic-bezier style pure CSS gradients, by [@larsenwork](https://github.com/larsenwork)

![screenshot](https://i.ibb.co/bdr9R8P/10-easing-gradients.png)

### 33. [Flat UI Colors](https://flatuicolors.com/)
> Flat-style handpicked color palettes, by [@ahmetsulek](https://twitter.com/ahmetsulek)

![screenshot](https://i.ibb.co/t3TwmWw/11-flatuicolors.png)

### 34. [Color Tools](https://colordesigner.io/tools)
> Mix, extract, convert and generate colors

![screenshot](https://i.ibb.co/1ntDHZc/12-colordesigner.png)

### 35. [ColorPalettes.Earth](https://colorpalettes.earth/)
> Natural color pallets from nature

![screenshot](https://i.ibb.co/tJ0JMK6/13-eart-palettes.png)

---

## Typography

### 36. [Font Joy](https://fontjoy.com/)
> Discover and preview various font pairings, by [@Jack000](https://github.com/Jack000)

![screenshot](https://i.ibb.co/2jGJdDD/22-font-joy.png)

### 37. [Type set With Me](https://typesetwith.me/)
> Typography & legibility sandbox, by [@tsmith512](https://github.com/tsmith512)

![screenshot](https://i.ibb.co/5vFDphR/23-typesetwith.png)

### 38. [Type Scale](https://type-scale.com/)
> Generate heading/ body font sizes, by [@jeremychurch](https://github.com/jeremychurch)

![screenshot](https://i.ibb.co/4809qtW/24-typescale.png)

### 39. [Glyphter](https://glyphter.com/)
> Create icon fonts from SVG graphics

![screenshot](https://i.ibb.co/x3myt3N/25-glyphter.png)

### 40. [Font-Library](https://katydecorah.com/font-library)
> Tagged library of Google Fonts, by [@katydecorah](https://github.com/katydecorah)

![screenshot](https://i.ibb.co/gPCghyQ/26-font-library.png)

### 41. [Glitter](https://wh0.github.io/glitter/)
> Export 90s-style Glitter text

![screenshot](https://i.ibb.co/GFyMm5k/27-glitter.png)

---

## Loaders

### 42. [Spin Kit](https://tobiasahlin.com/spinkit/)
> Selection of clean CSS loading animations

![screenshot](https://i.ibb.co/t2CJLg0/28-spinkit.gif)

### 43. [Whirl](https://whirl.netlify.app/)
> 100+ CSS loading animations, for copy-paste

![screenshot](https://i.ibb.co/rvG8Bzx/29-whirl.gif)

### 44. [Loader Generator](https://www.cssportal.com/css-loader-generator/)
> Pre-built and custom pure CSS loaders

![screenshot](https://i.ibb.co/7jwBBj4/30-loader-generator.gif)

### 45. [lukehaas - CSS-Loaders](https://projects.lukehaas.me/css-loaders/)
> Simple pure CSS loading animations

![screenshot](https://i.ibb.co/M1YWH6d/31-lukehaas-single-element.gif)

### 46. [CSSLoaders](https://cssloaders.github.io/)
> Complex pure CSS loaders

### 47. [loading.io/css](https://loading.io/css/)
> CSS implementations of common loaders

---

## Layouts

### 48. [CSS Grid Garden](https://cssgridgarden.com/)
> Interactive game for learning CSS grid, by [@thomaspark](https://github.com/thomaspark)

![screenshot](https://i.ibb.co/Ph6kx0X/40-css-gridgarden.png)

### 49. [FlexboxFroggy](https://flexboxfroggy.com/)
> Interactive game for learning flexbox, by [@thomaspark](https://github.com/thomaspark)

![screenshot](https://i.ibb.co/SPy0Qdg/41-flexbox-froggy.png)

### 50. [Flexplorer](https://bennettfeely.com/flexplorer/)
> Visual flexbox demo, by [@bennettfeely](https://twitter.com/bennettfeely)

![screenshot](https://i.ibb.co/dbqDnnZ/42-flexsplorer.png)

### 51. [Flexulator](https://www.flexulator.com/)
> An interactive CSS Flexbox space distribution calculator, by [@telagraphic](https://github.com/telagraphic)

![screenshot](https://i.ibb.co/pZNwVZj/43-flexulator.png)

### 52. [Grid Generator](https://cssgrid-generator.netlify.app/)
> Make grids using the CSS grid-template properties, by [@sdras](https://github.com/sdras) (similar to [grid.layoutit.com](https://grid.layoutit.com/))

![screenshot](https://i.ibb.co/59t7mw0/44-grid-generator.png)

### 53. [Layout Generator](https://layout.bradwoods.io/)
> A modern CSS layout maker

![screenshot](https://i.ibb.co/4mzZWMT/45-layout-generator.png)

### 54. [Box Model Diagram](https://codepen.io/carolineartz/full/ogVXZj)
> Just a visual box model demo

![screenshot](https://i.ibb.co/FK0p8r9/46-box-model.png)

---

## Informative

### 55. [CSS Timeline](https://css-timeline.vercel.app/)
> A history of CSS

![screenshot](https://i.ibb.co/fSHtrQ8/47-css-timeline.png)

### 56. [Screen Size Map](https://screensizemap.com/)
> View popular screen sizes for responsive design

![screenshot](https://i.ibb.co/gvt1rX9/48-screensizemap.png)

### 57. [CSS Ruler](https://katydecorah.com/css-ruler/)
> Preview various CSS units relative to each other

![screenshot](https://i.ibb.co/RbVTKXk/49-css-ruler.png)

### 58. [bada55](http://bada55.io/)
>  List of very funny CSS hex color codes
> See also, [colors.lol](https://colors.lol/) for some overly-descriptive color pallets

![screenshot](https://i.ibb.co/WW3vXs6/50-bada55.png)

### 59. [Who can use?](https://www.whocanuse.com)
> Checks accessibility grade of a given color combinations, similar to [Colorable](https://colorable.jxnblk.com/)

![screenshot](https://i.ibb.co/ZGVxFvf/59-who-can-use.png)

### 60. [Can I use?](https://caniuse.com/)
> Browser compatibility check of various, CSS, JS, HTML and web features

![screenshot](https://i.ibb.co/sg6MLP3/57-can-i-use.png)

### 61. [Can I email?](https://www.caniemail.com/)
> Similar to [Can I use?](https://caniuse.com), but checks if a given CSS property (or HTML elem) is compatible with email clients

![screenshot](https://i.ibb.co/h7qwsnb/58-can-i-email.png)

### 62. [CSS Processing Tools](https://codebeautify.org/css-tools)
> Convert to and from any other CSS language

![screenshot](https://i.ibb.co/82F5fSG/51-css-tools.png)

### 63. [Unused CSS](https://unused-css.com/)
> Searches your site for unused CSS, and displays stats

![screenshot](https://i.ibb.co/z4MYSs5/52-unused-css.png)

### 64. [Component.Gallery](https://component.gallery)
> Global component search

![screenshot](https://i.ibb.co/YPLHzd8/53-component-gallery.png)

### 65. [Design System Gallery](https://designsystemsrepo.com/design-systems-recent/)
> A collection of open design systems, for inspiration

### 66. [Checklist.design](https://www.checklist.design/)
> A collection of design best practices organised as checklists

### 67. [Glyphs](https://css-tricks.com/snippets/html/glyphs/)
> A list of CSS glyph character codes (see also [GlyphSearch](https://glyphsearch.com) for library icons)

### 68. [CSS-Tricks.com](https://css-tricks.com/)
> The best CSS blog out there

### 69. [Curated Design Tools](https://github.com/kudapara/curated-design-tools)
> A curated list of awesome design tools

### 70. [Awesome-CSS-Frameworks](https://github.com/troxler/awesome-css-frameworks)
> A list of open source CSS frameworks

### 71. [CSS Reference](https://cssreference.io/)
> A visual guide to CSS properties (similar to [htmlreference.io](https://htmlreference.io/))

### 72. [MDN CSS Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
> Excellent documentation of all available CSS properties

| <small>If you like this kind of stuff</small>,<br><small>consider following for more :)</small> | [![Follow Lissy93 on GitHub](https://img.shields.io/badge/-Lissy93-3a3a3a?style=flat&logo=GitHub&logoColor=white)](https://github.com/Lissy93)[![Follow Lissy_Sykes on Twitter](https://img.shields.io/badge/-@Lissy_Sykes-00acee?style=flat&logo=Twitter&logoColor=white)](https://twitter.com/Lissy_Sykes) |
|-|-|