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 Gómez Hollger

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

Collapse
 
elliot_brenya profile image
Elliot Brenya sarfo

Thanks for sharing Alicia

Collapse
 
d7460n profile image
D7460N

This is a treasure trove! Thank you so much!

Collapse
 
myrddral profile image
Attila Béli

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

Collapse
 
itsmestevieg profile image
Stevie G

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

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
 
spectrasonic profile image
Manuel Heredia

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

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
 
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
 
svenni profile image
svenniuwe

Thanks!!!

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
 
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
 
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
 
zoujia profile image
zoujia

Great👍

Collapse
 
caglarjv profile image
CaglarJv

Thx.

Collapse
 
yamaou profile image
Yamalab Design(Yuta)

Awesome! Thank you so much!

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
 
aaradj profile image
Arad jahangiri • Edited

animista
this website is for cool animations in css

Collapse
 
fahim_rayhan profile image
Fahim Rayhan

greeeat resources 💖, thanks you so much @lissy93

Collapse
 
sergi0martin profile image
Sergi0Martin

Wow! Awesome post!

Collapse
 
perisicnikola37 profile image
Nikola Perišić

Thanks for sharing :)

Collapse
 
renatablancog profile image
Renata Blanco

Woww

Collapse
 
clabnet profile image
Claudio Barca

A beautiful Collection of Magic resources. Thanks.

Collapse
 
danieltikamori profile image
danieltikamori

Thank you very much! Wish you all the best!

Collapse
 
ephraimdavid22 profile image
Agbeze_Obinna

Beautiful 😍

Collapse
 
vistar profile image
Vitaliy
  1. Clothoid Corners - WTF?
Collapse
 
freecodez profile image
Freecodez
Collapse
 
d7460n profile image
D7460N

Amazing! Thank you!

Collapse
 
jace profile image
Jace Chou

Holy Crap! Thanks you

Collapse
 
007_dark_shadow profile image
Asif Vora

Thanks for sharing :)

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
 
freecodez profile image
Freecodez
Collapse
 
hasintha profile image
Hasintha Weragala

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

Collapse
 
waradu profile image
Waradu
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
 
hacknetayush profile image
HackNetAyush

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

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
 
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
 
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
 
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
 
darkmix841 profile image
DarkMix842

Thanx

Collapse
 
danishzayan profile image
Danish Kamal

All assets are very useful...

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
 
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
 
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
 
jcink88 profile image
Jcink88

This is awesome!

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
 
ashm10 profile image
Asther Marie Moreno

Thank you, SAVED! 🫶🏻

Collapse
 
rameshkmunjal profile image
RAMESH KUMAR MUNJAL

Truly Amazing. Thanks a ton.

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
 
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
 
jbuilds profile image
jbuilds

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

Collapse
 
jackiedevto profile image
Jackie

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

Collapse
 
juliolinarez profile image
Julio Linarez

Awesome!!!

Collapse
 
sovietstates0 profile image
SovietStates0

omfg WOW

Collapse
 
funkrogers profile image
Funk Rogers

Amazing collection! Thx

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
 
princeleonal profile image
Prince Leonal • Edited

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
 
aicgwebmas24632 profile image
Webmaster AiBrainX.com • Edited

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

Collapse
 
mvfl profile image
mvfl

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

Collapse
 
edsondsouza profile image
Edson Sooraj Dsouza

These are truly amazing!!

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
 
atahiri profile image
Abdel

Thanks for sharing Alicia

Collapse
 
merc_opolo profile image
Merc Opolo

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

Collapse
 
yogeshvishnole profile image
yogeshvishnole

Thanks mam.

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
 
reprodev profile image
Repro Dev

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

Collapse
 
ad2009 profile image
AD2009

Excellent list, thanks.

Collapse
 
chrisvaz profile image
Chris Vaz

Really helpful. Thanks for sharing!

Collapse
 
pratham24283892 profile image
Pratham Mishra

Love this blog thanks mam

Collapse
 
yongwansong profile image
yongwansong

Thanks Alicia.

Collapse
 
jeffchavez_dev profile image
Jeff Chavez

Wow. This is worth saving!

Collapse
 
jordygrunn profile image
Jordy Bakker

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

Collapse
 
imtiaz_ali_a117e25cc2999e profile image
Imtiaz Ali

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

Collapse
 
pixl profile image
px

Very helpful

Collapse
 
kylereeman profile image
KyleReemaN

thank you really nice selection

Collapse
 
gonzalo16601124 profile image
Gonzalo Andres

Oh my God! Thank you very much!

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
 
dave_86 profile image
Dave

Thanks for sharing