DEV Community

Cover image for Super Useful CSS Resources 🌈

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...
Collapse
 
stephenwhitmore profile image
Stephen Whitmore β€’

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

Collapse
 
lissy93 profile image
Alicia Sykes β€’

Thanks Steve :) πŸ’–

Collapse
 
mariamarsh profile image
Maria 🍦 Marshmallow β€’

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 πŸ₯°

Collapse
 
wesborland profile image
Marcos Javier Gomez Hollger β€’

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

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo β€’

Thanks for sharing Alicia

Collapse
 
myrddral profile image
Attila BΓ©li β€’

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

Collapse
 
vincenius profile image
Vincent Will β€’

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

Collapse
 
lissy93 profile image
Alicia Sykes β€’

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

Collapse
 
spectrasonic profile image
Manuel Heredia β€’

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

Collapse
 
santhoshvr97 profile image
Santhosh VR β€’

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

Collapse
 
d7460n profile image
D7460N β€’

This is a treasure trove! Thank you so much!

Collapse
 
itsmestevieg profile image
Stevie G β€’

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

Collapse
 
anjapcodes profile image
Anja Petry β€’

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

Collapse
 
svenni profile image
svenniuwe β€’

Thanks!!!

Collapse
 
websilvercraft profile image
websilvercraft β€’ β€’ 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).

Collapse
 
weedshaker profile image
weedshaker β€’

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.

Collapse
 
alaindet profile image
Alain D'Ettorre β€’

This is fantastic, thank you

Collapse
 
amircahyadi profile image
Amir-cahyadi β€’

Thanks for sharring πŸ‘β€οΈ

Collapse
 
kofipascal profile image
kofiPascal β€’

Thanks for sharing

Collapse
 
artydev profile image
artydev β€’

Absolutely amazingAmazing
Thanks you very much

Collapse
 
aicgwebmas24632 profile image
Webmaster AiBrainX.com β€’

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!

Collapse
 
aaradj profile image
Arad jahangiri β€’ β€’ Edited

animista
this website is for cool animations in css

Collapse
 
sadid369 profile image
Sadid β€’

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

Collapse
 
abidullah786 profile image
ABIDULLAH786 β€’

amazing collection πŸ’–

Collapse
 
kitcoder profile image
Michael β€’

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

Collapse
 
cherishirish profile image
cherishirish β€’

Amazing Post!

Collapse
 
oben profile image
OBen β€’

This is lovely, thank you, mate

Collapse
 
candlepeter profile image
Isienyi Paschal Ejike β€’

Thank you for sharing.

Collapse
 
sakar_dhana profile image
Sakar β€’

Huge collection of tools for frontend developers. Thank you.

Collapse
 
renatablancog profile image
Renata Blanco β€’

Woww

Collapse
 
zoujia profile image
zoujia β€’

GreatπŸ‘

Collapse
 
caglarjv profile image
CaglarJv β€’

Thx.

Collapse
 
yamaou profile image
Yamalab Design(Yuta) β€’

Awesome! Thank you so much!

Collapse
 
clabnet profile image
Claudio Barca β€’

A beautiful Collection of Magic resources. Thanks.

Collapse
 
sajjadnazaridev profile image
mr_sajjad_dev β€’

Thank you very much for the information you have shared πŸ’–

Collapse
 
danbailey profile image
Dan Bailey β€’

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

Collapse
 
intermundos profile image
intermundos β€’

Thank you very much for this πŸ™

Collapse
 
sleepyweb profile image
Sayan Mandal β€’

This is one of the best thing I found online!

Collapse
 
danieltikamori profile image
danieltikamori β€’

Thank you very much! Wish you all the best!

Collapse
 
ashm10 profile image
Asther Marie Moreno β€’

Thank you, SAVED! 🫢🏻

Collapse
 
rameshkmunjal profile image
RAMESH KUMAR MUNJAL β€’

Truly Amazing. Thanks a ton.

Collapse
 
ephraimdavid22 profile image
Agbeze_Obinna β€’

Beautiful 😍

Collapse
 
vistar profile image
Vitaliy β€’
  1. Clothoid Corners - WTF?
Collapse
 
phuonghd profile image
Phuong Huynh β€’

Thanks so much Alicia

Collapse
 
atif_dev profile image
Atif Iqbal β€’

Thanks for sharing πŸ˜‡

Collapse
 
jonniola profile image
Jon Niola β€’

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

Collapse
 
anirseven profile image
Anirban Majumdar β€’

This is amazing, thanks for sharing these

Collapse
 
fahim_rayhan profile image
Fahim Rayhan β€’

greeeat resources πŸ’–, thanks you so much @lissy93

Collapse
 
valgy_de profile image
Bica Valgy Alves de Sousa β€’

ohhh my God, very comprehensive list
Thanks

Collapse
 
madhubankhatri profile image
Madhuban Khatri β€’

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

Collapse
 
capscode profile image
capscode β€’

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

Collapse
 
hacknetayush profile image
HackNetAyush β€’

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

Collapse
 
freecodez profile image
Freecodez β€’
Collapse
 
d7460n profile image
D7460N β€’

Amazing! Thank you!

Collapse
 
dome68 profile image
Domenico β€’

Thanks, Alicia. An amazing collection of tools.

Collapse
 
mika76 profile image
Mladen Mihajlović ‒

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

Collapse
 
jace profile image
Jace Chou β€’

Holy Crap! Thanks you

Collapse
 
sierra7659 profile image
sierra7659 β€’

Thank you!

Collapse
 
sakar_dhana profile image
Sakar β€’

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

Collapse
 
ranjitodedra profile image
Ranjit Odedra β€’

helpful blog

Collapse
 
007_dark_shadow profile image
Asif Vora β€’

Thanks for sharing :)

Collapse
 
krunalgupta02 profile image
Krunal Gupta β€’

Awesome list πŸ™ŒπŸ™ŒπŸ™Œ

Collapse
 
djpandab profile image
Stephen Smith β€’

Great references for real!

Collapse
 
mandrewdarts profile image
M. Andrew Darts β€’

This is amazing! Thank you!

Collapse
 
ced404 profile image
CedπŸ’£ β€’

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

Collapse
 
jangelodev profile image
JoΓ£o Angelo β€’

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

Collapse
 
hermawanali profile image
Hermawan Ali β€’

Thank you

Collapse
 
rouhollah profile image
Rouhollah β€’

Interesting

Collapse
 
rizkytegar profile image
πŸŽ‰ Rizky Tegar Pratama β€’

nice

Collapse
 
ranjitodedra profile image
Ranjit Odedra β€’

useful stuffπŸ‘

Collapse
 
dubcee93 profile image
dubcee93 β€’

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

Collapse
 
danishzayan profile image
Danish Kamal β€’

All assets are very useful...

Collapse
 
darkmix841 profile image
DarkMix842 β€’

Thanx

Collapse
 
sergi0martin profile image
Sergi0Martin β€’

Wow! Awesome post!

Collapse
 
freecodez profile image
Freecodez β€’
Collapse
 
subhos profile image
Subhadeep Datta β€’

Great Collection !! Thanks for sharing.

Collapse
 
vijaykhatri96 profile image
Vijay Singh Khatri β€’

Hey,

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

Collapse
 
fiqrisr profile image
Fiqri Syah Redha β€’

Awesome list. Thanks!

Collapse
 
kissu profile image
Konstantin BIFERT β€’

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 βœ…)! πŸ™πŸ»

Collapse
 
naimur_rahman profile image
Naimur Rahman β€’

Thanks for sharing, very useful resources...

Collapse
 
renancferro profile image
Renan Ferro β€’

Wooow, nice article

Collapse
 
alidev profile image
Ali Kamalizade β€’

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

Collapse
 
darkdev56 profile image
DarkDev β€’

Wow this is extremely Helpful, thanks !

Collapse
 
jake0011 profile image
JAKE β€’

thanks Alicia.
a very great post.

Collapse
 
hasintha profile image
Hasintha Weragala β€’

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

Collapse
 
rooneyhoi profile image
Dax Truong β€’

This is awesome! Thanks Alicia for sharing :)

Collapse
 
lukeecart profile image
Luke Cartwright β€’

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

Collapse
 
perisicnikola37 profile image
Nikola Periőić ‒

Thanks for sharing :)

Collapse
 
omprakash2929 profile image
Omprakashchauhan β€’

Thank you for this useful CSS resources πŸ₯°πŸ₯°
Please make Tailwind CSS resources

Collapse
 
janosongithub profile image
JANOSongithub β€’

Thank you, this is very awesome, and helpful.

Collapse
 
jhovannymosq profile image
JesΓΊs Mosquera. β€’

Thank you, this is very helpful.

Collapse
 
waradu profile image
Waradu β€’
Collapse
 
jcink88 profile image
Jcink88 β€’

This is awesome!

Collapse
 
juliolinarez profile image
Julio Linarez β€’

Awesome!!!

Collapse
 
dave_86 profile image
Dave β€’

Thanks for sharing

Collapse
 
imtiaz_ali_a117e25cc2999e profile image
Imtiaz Ali β€’

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

Collapse
 
jeffchavez_dev profile image
Jeff Chavez β€’

Wow. This is worth saving!

Collapse
 
reprodev profile image
Repro Dev β€’

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

Collapse
 
fullspectrumcoder profile image
Jacob Wilson β€’

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!

Collapse
 
yogeshvishnole profile image
yogeshvishnole β€’

Thanks mam.

Collapse
 
atahiri profile image
Abdel β€’

Thanks for sharing Alicia

Collapse
 
jackiedevto profile image
Jackie β€’

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

Collapse
 
aicgwebmas24632 profile image

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

Collapse
 
edsondsouza profile image
Edson Sooraj Dsouza β€’

These are truly amazing!!

Collapse
 
mvfl profile image
mvfl β€’

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

Collapse
 
sovietstates0 profile image
SovietStates0 β€’

omfg WOW

Collapse
 
jbuilds profile image
jbuilds β€’

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

Collapse
 
funkrogers profile image
Funk Rogers β€’

Amazing collection! Thx

Collapse
 
princeleonal profile image

super useful alicia !!

Collapse
 
jerad_alexander profile image
Jerad Alexander β€’

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.

Collapse
 
merc_opolo profile image
Merc Opolo β€’

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

Collapse
 
chrisvaz profile image
Chris Vaz β€’

Really helpful. Thanks for sharing!

Collapse
 
pratham24283892 profile image
Pratham Mishra β€’

Love this blog thanks mam

Collapse
 
jordygrunn profile image
Jordy Bakker β€’

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

Collapse
 
gonzalo16601124 profile image
Gonzalo Andres β€’

Oh my God! Thank you very much!

Collapse
 
yongwansong profile image
yongwansong β€’

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

Collapse
 
marma92 profile image
ELBAZ Amram β€’

Incredible resource, thank you so much !

Collapse
 
ad2009 profile image
AD2009 β€’

Excellent list, thanks.

Collapse
 
yongwansong profile image
yongwansong β€’

Thanks Alicia.

Collapse
 
kylereeman profile image
KyleReemaN β€’

thank you really nice selection

Collapse
 
tillyruais profile image
TillyRuais β€’

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

Collapse
 
realsmoqi profile image
smoqi β€’

Damnnnn thank you so much

Collapse
 
pixl profile image
px β€’

Very helpful

Collapse
 
ssd profile image
server side digest β€’

Thanks, Really helpful.

πŸ‘‰ Kindly check my blog too and suggest any improvements dev.to/lovepreetsingh/what-is-dock...

Collapse
 
cedwardsmedia profile image
Corey Edwards β€’

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