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 Gómez Hollger • Dec 4 '22

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

Elliot Brenya sarfo • Dec 4 '22

Thanks for sharing Alicia

Manuel Heredia • Feb 8 '23

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

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!

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 ❤

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

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/

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

Amir-cahyadi • Dec 5 '22

Thanks for sharring 👍❤️

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

kofiPascal • Dec 4 '22

Thanks for sharing

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

Sakar • Apr 23 '23

Huge collection of tools for frontend developers. Thank you.

zoujia • Apr 18 '23

Great👍

CaglarJv • Apr 17 '23

Thx.

Yamalab Design(Yuta) • Apr 13 '23

Awesome! Thank you so much!

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!

Subhadeep Datta • Dec 6 '22

Great Collection !! Thanks for sharing.

Claudio Barca • Dec 7 '22

A beautiful Collection of Magic resources. Thanks.

danieltikamori • Mar 22

Thank you very much! Wish you all the best!

Agbeze_Obinna • Mar 6

Beautiful 😍

Vitaliy • Feb 25

Clothoid Corners - WTF?

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!

Jace Chou • Jan 24

Holy Crap! Thanks you

Asif Vora • Jan 17

Thanks for sharing :)

João Angelo • Jan 13

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

Hermawan Ali • Jan 8

Thank you

Freecodez • Oct 25 '23

freecodez.com

Hasintha Weragala • Oct 20 '23

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

Waradu • Sep 13 '23

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

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.

Mladen Mihajlović • Dec 8 '22

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

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

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.

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!

DarkMix842 • Dec 6 '22

Thanx

Danish Kamal • Dec 6 '22

All assets are very useful...

Renata Blanco • May 2

Woww

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.

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

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.

Jcink88 • Dec 4 '22

This is awesome!

Asther Marie Moreno • Jan 13 '23

Thank you, SAVED! 🫶🏻

RAMESH KUMAR MUNJAL • Jan 7 '23

Truly Amazing. Thanks a ton.

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

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!

Domenico • Dec 8 '22

Thanks, Alicia. An amazing collection of tools.

Funk Rogers • Jan 23 '23

Amazing collection! Thx

yongwansong • Dec 7 '22

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

ELBAZ Amram • Dec 7 '22

Incredible resource, thank you so much !

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.

mvfl • Apr 6 '23

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

jbuilds • Mar 22 '23

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

SovietStates0 • Mar 31 '23

omfg WOW

TillyRuais • Dec 5 '22

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

smoqi • Dec 5 '22

Damnnnn thank you so much

Jackie • Sep 3 '23

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

Merc Opolo • Dec 9 '22

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

Abdel • Sep 16 '23

Thanks for sharing Alicia

yogeshvishnole • Sep 29 '23

Thanks mam.

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!