Skip to content

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

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

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

Stevie G • Dec 7 '22

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

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 ❤

Attila Béli • Dec 4 '22

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

D7460N • Dec 5 '22

This is a treasure trove! Thank you so much!

Manuel Heredia • Feb 8 '23

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

svenniuwe • Dec 4 '22

Thanks!!!

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

Anja Petry • 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/

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.

Alain D'Ettorre • Dec 5 '22

This is fantastic, thank you

Amir-cahyadi • Dec 5 '22

Thanks for sharring 👍❤️

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!

artydev • Jun 18 '23

Absolutely amazingAmazing
Thanks you very much

kofiPascal • Dec 4 '22

Thanks for sharing

Phuong Huynh • Dec 13 '22

Thanks so much Alicia

Hasintha Weragala • Oct 20 '23

fucking awesome, what a load of awesomeness. You're god

Nikola Perišić • Jun 24 '24

Thanks for sharing :)

Sayan Mandal • Mar 16 '23

This is one of the best thing I found online!

Asther Marie Moreno • Jan 13 '23

Thank you, SAVED! 🫶🏻

intermundos • Mar 20 '23

Thank you very much for this 🙏

Sergi0Martin • Jun 30 '24

Wow! Awesome post!

Dan Bailey • Mar 23 '23

Holy crap, I needed like half of these things and didn't even know I needed them beforehand. Thank you!

RAMESH KUMAR MUNJAL • Jan 7 '23

Truly Amazing. Thanks a ton.

Jace Chou • Jan 24 '24

Holy Crap! Thanks you

Subhadeep Datta • Dec 6 '22

Great Collection !! Thanks for sharing.

Jesús Mosquera. • Dec 4 '22

Thank you, this is very helpful.

HackNetAyush • Dec 8 '22

Wow these resources are very helpful... Thanks for sharing!

Ranjit Odedra • Dec 8 '22

helpful blog

JANOSongithub • Dec 5 '22

Thank you, this is very awesome, and helpful.

Ced💣 • Dec 7 '22

Very nice list! Also fffuel.co/ has some nice tools too.

Omprakashchauhan • Dec 5 '22

Thank you for this useful CSS resources 🥰🥰
Please make Tailwind CSS resources

Sakar • Dec 8 '22

Hello, this is a lengthy list. Thank you for putting everything together. Every front-end developer should bookmark it for future use.

M. Andrew Darts • Dec 7 '22

This is amazing! Thank you!

Renata Blanco • May 2 '24

Woww

Luke Cartwright • Dec 5 '22

This is an incredible set of resources!! Thank you for sharing

Vijay Singh Khatri • Dec 6 '22

Hey,

You can share all these resources are at one of the best programming search engines: Hack.io

Jcink88 • Dec 4 '22

This is awesome!

capscode • Dec 9 '22

Wow....just amazing and very helpful
Thanks for sharing this amazing collection

Bica Valgy Alves de Sousa • Dec 9 '22

ohhh my God, very comprehensive list
Thanks

Madhuban Khatri • Dec 9 '22

Thanks for sharing this
Now I'll use these animations and transitions in my upcoming projects.

Anirban Majumdar • Dec 9 '22

This is amazing, thanks for sharing these

Arad jahangiri • Dec 9 '22 • Edited

animista
this website is for cool animations in css

Jon Niola • Dec 9 '22

Thanks for the list. Quite a few in here I wasn't familiar with.

Asif Vora • Jan 17 '24

Thanks for sharing :)

Atif Iqbal • Dec 10 '22

Thanks for sharing 😇

OBen • Jun 1 '23

This is lovely, thank you, mate

danieltikamori • Mar 22 '24

Thank you very much! Wish you all the best!

mr_sajjad_dev • Apr 1 '23

Thank you very much for the information you have shared 💖

zoujia • Apr 18 '23

Great👍

CaglarJv • Apr 17 '23

Thx.

Sakar • Apr 23 '23

Huge collection of tools for frontend developers. Thank you.

Yamalab Design(Yuta) • Apr 13 '23

Awesome! Thank you so much!

Michael • Jun 14 '23

So many to choose from, very nice. Great resources for those that are leveling up their CSS.

cherishirish • Jun 7 '23

Amazing Post!

Sadid • Aug 26 '23

Love this. Thanks a lot!!!!!!!!!

ABIDULLAH786 • Aug 14 '23

amazing collection 💖

Waradu • Sep 13 '23

onotakehiko.dev/clothoid/ -> onotakehiko.com/clothoid/

Isienyi Paschal Ejike • Apr 24 '23

Thank you for sharing.

Freecodez • Oct 25 '23

Fahim Rayhan • Jul 7 '24

greeeat resources 💖, thanks you so much @lissy93

Hermawan Ali • Jan 8 '24

Thank you

Claudio Barca • Dec 7 '22

A beautiful Collection of Magic resources. Thanks.

D7460N • Feb 4 '24

Amazing! Thank you!

Vitaliy • Feb 25 '24

Clothoid Corners - WTF?

João Angelo • Jan 13 '24

Alicia Sykes, great post !
Very useful, thanks for sharing

Freecodez • Oct 25 '23

freecodez

👻 Happy Halloween Parallax Landing Page. 👻 Halloween special, Credit: codepen ❤️

Freecodez ・ Oct 25

#freecodez #react #html #blog

Agbeze_Obinna • Mar 6 '24

Beautiful 😍

Dax Truong • Dec 5 '22

This is awesome! Thanks Alicia for sharing :)

JAKE • Dec 5 '22

thanks Alicia.
a very great post.

DarkDev • Dec 5 '22

Wow this is extremely Helpful, thanks !

Ali Kamalizade • Dec 5 '22

I knew about Can I Use but Can I Email is new to me - very helpful!

Danish Kamal • Dec 6 '22

All assets are very useful...

Renan Ferro • Dec 5 '22

Wooow, nice article

DarkMix842 • Dec 6 '22

Thanx

Stephen Smith • Dec 7 '22

Great references for real!

sierra7659 • Dec 8 '22

Thank you!

Naimur Rahman • Dec 5 '22

Thanks for sharing, very useful resources...

Krunal Gupta • Dec 7 '22

Awesome list 🙌🙌🙌

Mladen Mihajlović • Dec 8 '22

Man there are just so. many! Wow! Thanks a million!

Domenico • Dec 8 '22

Thanks, Alicia. An amazing collection of tools.

dubcee93 • Dec 7 '22

This is a pretty nice list, will be bookmarking for later. Thanks!

Ranjit Odedra • Dec 7 '22

useful stuff👍

Konstantin BIFERT • Dec 6 '22

Wooooow, the amount of amazing resources is astonishing here! 🤯
I forgot some of them and didn't knew the existence of others.

Clearly an amazing selection, thanks for that one (bookmarked ✅)! 🙏🏻

🎉 Rizky Tegar Pratama • Dec 7 '22

nice

Rouhollah • Dec 7 '22

Interesting

Fiqri Syah Redha • Dec 6 '22

Awesome list. Thanks!

TillyRuais • Dec 5 '22

How is CSS different from HTML ? vashikaran mantra for lost love

mvfl • Apr 6 '23

These are awesome! thanks for sharing these useful tools :)

yogeshvishnole • Sep 29 '23

Thanks mam.

KyleReemaN • Dec 5 '22

thank you really nice selection

Corey Edwards • Dec 5 '24

Definitely saving these articles to Linkwarden for future reference. Where were you with these lists when I got started in dev? lol

Abdel • Sep 16 '23

Thanks for sharing Alicia

Pratham Mishra • Dec 8 '22

Love this blog thanks mam

AD2009 • Dec 6 '22

Excellent list, thanks.

smoqi • Dec 5 '22

Damnnnn thank you so much

Jeff Chavez • Mar 25 '24

Wow. This is worth saving!

Funk Rogers • Jan 23 '23

Amazing collection! Thx

Jackie • Sep 3 '23

Absolutely wonderful.. Thanks you very much. Steve..!!

yongwansong • Dec 6 '22

Thanks Alicia.

yongwansong • Dec 7 '22

Hi Alicia
Nice to meet you
it's very useful.

Dave • Sep 25 '24

Thanks for sharing

Merc Opolo • Dec 9 '22

Thanks for these notes, I hope you will make such a post about other tools

Imtiaz Ali • Jun 11 '24

Dude it's just amazing helped alot in my development.

Jacob Wilson • Dec 18 '23

What an amazing article with tons of resources to choose from! I’ll definitely be using these when making my portfolio website. I’ll also be sure to credit the authors of the generators. What a find!

jbuilds • Mar 22 '23

Would love to see dreamsands.io added to this later when we are ready for the public!

Chris Vaz • Dec 8 '22

Really helpful. Thanks for sharing!

Jordy Bakker • Dec 8 '22

Thank you for sharing Alicia. Those shared links are great!

Webmaster AiBrainX.com • Jul 16 '23 • Edited

Correction, seems I joined a couple of weeks back. There you have it, your list so good you made me join TWICE ;)

Jerad Alexander • Dec 15 '22

I love websites that streamline website designing. Makes my job so much easier, and it's nice when they show the code so you know how exactly it all works.

Gonzalo Andres • Dec 7 '22

Oh my God! Thank you very much!

ELBAZ Amram • Dec 7 '22

Incredible resource, thank you so much !

Edson Sooraj Dsouza • Apr 19 '23

These are truly amazing!!

Prince Leonal • Dec 17 '22 • Edited

super useful alicia !!

Lovepreet Singh • Dec 4 '22

Thanks, Really helpful.

👉 Kindly check my blog too and suggest any improvements dev.to/lovepreetsingh/what-is-dock...

SovietStates0 • Mar 31 '23

omfg WOW

Julio Linarez • Dec 4 '22

Awesome!!!

px • Dec 4 '22

Very helpful

Repro Dev • Feb 20 '24

This is a great list to start down my CSS rabbit hole, thank you