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

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

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

Manuel Heredia • Feb 8 '23

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

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 ❤

D7460N • Dec 5 '22

This is a treasure trove! Thank you so much!

Stevie G • Dec 7 '22

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

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/

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

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 👍❤️

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!

Arad jahangiri • Dec 9 '22 • Edited

animista
this website is for cool animations in css

Sadid • Aug 26 '23

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

ABIDULLAH786 • Aug 14 '23

amazing collection 💖

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!

OBen • Jun 1 '23

This is lovely, thank you, mate

Isienyi Paschal Ejike • Apr 24 '23

Thank you for sharing.

Sakar • Apr 23 '23

Huge collection of tools for frontend developers. Thank you.

Renata Blanco • May 2

Woww

zoujia • Apr 18 '23

Great👍

CaglarJv • Apr 17 '23

Thx.

Yamalab Design(Yuta) • Apr 13 '23

Awesome! Thank you so much!

Claudio Barca • Dec 7 '22

A beautiful Collection of Magic resources. Thanks.

mr_sajjad_dev • Apr 1 '23

Thank you very much for the information you have shared 💖

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!

intermundos • Mar 20 '23

Thank you very much for this 🙏

Sayan Mandal • Mar 16 '23

This is one of the best thing I found online!

danieltikamori • Mar 22

Thank you very much! Wish you all the best!

Asther Marie Moreno • Jan 13 '23

Thank you, SAVED! 🫶🏻

RAMESH KUMAR MUNJAL • Jan 7 '23

Truly Amazing. Thanks a ton.

Agbeze_Obinna • Mar 6

Beautiful 😍

Vitaliy • Feb 25

Clothoid Corners - WTF?

Phuong Huynh • Dec 13 '22

Thanks so much Alicia

Atif Iqbal • Dec 10 '22

Thanks for sharing 😇

Jon Niola • Dec 9 '22

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

Anirban Majumdar • Dec 9 '22

This is amazing, thanks for sharing these

Fahim Rayhan • Jul 7

greeeat resources 💖, thanks you so much @lissy93

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.

capscode • Dec 9 '22

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

HackNetAyush • Dec 8 '22

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

Freecodez • Oct 25 '23

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

Freecodez ・ Oct 25

#freecodez #react #html #blog

D7460N • Feb 4

Amazing! Thank you!

Domenico • Dec 8 '22

Thanks, Alicia. An amazing collection of tools.

Mladen Mihajlović • Dec 8 '22

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

Jace Chou • Jan 24

Holy Crap! Thanks you

sierra7659 • Dec 8 '22

Thank you!

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.

Ranjit Odedra • Dec 8 '22

helpful blog

Asif Vora • Jan 17

Thanks for sharing :)

Krunal Gupta • Dec 7 '22

Awesome list 🙌🙌🙌

Stephen Smith • Dec 7 '22

Great references for real!

M. Andrew Darts • Dec 7 '22

This is amazing! Thank you!

Ced💣 • Dec 7 '22

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

João Angelo • Jan 13

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

Hermawan Ali • Jan 8

Thank you

Rouhollah • Dec 7 '22

Interesting

🎉 Rizky Tegar Pratama • Dec 7 '22

nice

Ranjit Odedra • Dec 7 '22

useful stuff👍

dubcee93 • Dec 7 '22

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

Danish Kamal • Dec 6 '22

All assets are very useful...

DarkMix842 • Dec 6 '22

Thanx

Sergi0Martin • Jun 30

Wow! Awesome post!

Freecodez • Oct 25 '23

freecodez.com

Subhadeep Datta • Dec 6 '22

Great Collection !! Thanks 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

Fiqri Syah Redha • Dec 6 '22

Awesome list. Thanks!

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 ✅)! 🙏🏻

Naimur Rahman • Dec 5 '22

Thanks for sharing, very useful resources...

Renan Ferro • Dec 5 '22

Wooow, nice article

Ali Kamalizade • Dec 5 '22

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

DarkDev • Dec 5 '22

Wow this is extremely Helpful, thanks !

JAKE • Dec 5 '22

thanks Alicia.
a very great post.

Hasintha Weragala • Oct 20 '23

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

Dax Truong • Dec 5 '22

This is awesome! Thanks Alicia for sharing :)

Luke Cartwright • Dec 5 '22

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

Nikola Perišić • Jun 24

Thanks for sharing :)

Omprakashchauhan • Dec 5 '22

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

JANOSongithub • Dec 5 '22

Thank you, this is very awesome, and helpful.

Jesús Mosquera. • Dec 4 '22

Thank you, this is very helpful.

Waradu • Sep 13 '23

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

Jcink88 • Dec 4 '22

This is awesome!

Julio Linarez • Dec 4 '22

Awesome!!!

Dave • Sep 25

Thanks for sharing

Imtiaz Ali • Jun 11

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

Jeff Chavez • Mar 25

Wow. This is worth saving!

Repro Dev • Feb 20

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

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!

yogeshvishnole • Sep 29 '23

Thanks mam.

Abdel • Sep 16 '23

Thanks for sharing Alicia

Jackie • Sep 3 '23

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

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

Edson Sooraj Dsouza • Apr 19 '23

These are truly amazing!!

mvfl • Apr 6 '23

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

SovietStates0 • Mar 31 '23

omfg WOW

jbuilds • Mar 22 '23

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

Funk Rogers • Jan 23 '23

Amazing collection! Thx

Prince Leonal • Dec 17 '22 • Edited

super useful alicia !!

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.