DEV Community

Super Useful CSS Resources 🌈

Alicia Sykes on December 03, 2022

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 lib...

Read full post

Displaying a subset of the total comments. Please sign in to view all comments on this post.

Stephen Whitmore • Dec 4 '22

Holy crap I'm starting to think you're magic. Between this and the dev tools article I've got some good references!

Alicia Sykes • Dec 5 '22

Thanks Steve :) 💖

Maria 🍦 Marshmallow • Dec 26 '22

This is an amazing list, and I'm sure it will make life easier for many front-end developers.
Which of these resources do you use the most?
Looking forward to similar posts for other IT areas 🥰

Marcos Javier Gomez Hollger • Dec 4 '22

Ohhh... Thanks Alicia for this... its very usseful! :)

Elliot Brenya sarfo • Dec 4 '22

Thanks for sharing Alicia

Santhosh VR • Dec 7 '22

Thanks for this useful resource and you saved a lot of time with this.. I am really love this page ❤

Manuel Heredia • Feb 8 '23

Thank you very much for this contribution, it is very complete.

Stevie G • Dec 7 '22

Fantastic List you have compiled Alicia. Thanks so much for sharing

D7460N • Dec 5 '22

This is a treasure trove! Thank you so much!

Attila Béli • Dec 4 '22

Top list, super easy to pick the right tool browsing the demo animations! Cheers!

Vincent Will • Dec 5 '22

Great collection Alicia! Thanks for including my animated BG generator (#22)

Alicia Sykes • Dec 5 '22

It's cool tool you've built :)
I've updated the post to also include a link to your GitHub - sorry, not sure why I missed that before

anjapcodes • May 3 '23

You're a godsend, thank you :) Love CSS, love your list!

I'd like to add some personal favourites here (my apologies if there are any duplicates):

CSS Diner flukeout.github.io/ (CSS selectors gamified)
hypercolor.dev/
gradient.style (basically anything Adam Argyle creates)
Rachel Andrew's newsletter: csslayout.news/issue-343/
web.dev/learn/css/
gridbyexample.com/
labs.jensimmons.com/

websilvercraft • Nov 17 '23 • Edited

I'm working on my own gradient generator on blank html, CSS Gradient Generator. I've was playing with gradients in css and I decided to build it as a simple tool to be able to create visually complex gradients with more colors(when using 3 color with radial gradient looks amazing).

svenniuwe • Dec 4 '22

Thanks!!!

Alain D'Ettorre • Dec 5 '22

This is fantastic, thank you

weedshaker • Aug 25 '23

Great Stuff!
I tried the CSS Grid Generator and even though my own grid layout implementation is not as beautiful, I guess you would certainly include this: weedshaker.github.io/cssGridLayout/ since it is far easier to use and the grid size is dynamic at drag and drop.

Amir-cahyadi • Dec 5 '22

Thanks for sharring 👍❤️

kofiPascal • Dec 4 '22

Thanks for sharing

artydev • Jun 18 '23

Absolutely amazingAmazing
Thanks you very much

Webmaster AiBrainX.com • Jul 16 '23

I joined this site. JUST because I had to leave you a note of well done, thank you, and where were you 3 months ago??? jk that was my fault. If my startup ever gets funding and you ever need a job. send me your name then done and done. Cheers!