DEV Community

Cover image for 10 CSS Resources that you should bookmark
Jatin Sharma
Jatin Sharma

Posted on • Updated on

10 CSS Resources that you should bookmark

In this article we are going to look at some awesome resource for you that can improve your productivity, I can assure you that you will not regret on clicking this article, so Let's see what I have got for you.

1. Neumorphism

This website generates the soft UI for your section or div and it can also customize border-radius, box-shadow and etc.

neumorphism

2. Shadows Brumm

It can generate multiple Layered shadow for you which gives very cool effect and you can customize the color from the curve.

shadows brumm

3. CSS Clip-path Maker

It can generate beautiful clip-path with various different shapes it can be very handy if you use these king of shapes and properties.

clip-path

4. Fancy Border Shape Generator

It generates most awesome shapes by manipulating border-radius and you can use it anywhere in you project. You can also change the size of shape to check how it'll look with your project preference.

border-shape

5. Cubic Curve

It basically generates the cubic-bezier for you animation in css. As we know we use ease-in, ease-out etc property for the animation to tell the browser what is the animation's flow. you can customize those properties here.

cubic-curve

6. CSS Gradient

If you work with gradient then you will love it. because I am using this for a long time and it's just perfect. and also here you can also get some tools like Gradient Button and many more.

gradient

7. CSS Waves Generator

According to me these three waves generators that are awesome to generate any kind of waves it could be for you footer or divider section etc.

CSS Waves

It generates simple waves with some customization.

css-waves-1

Gradient Multiple Waves

It can generate multiple gradient waves which is awesome.

css-waves-2

Multiple Animated Waves

It can generate multiple gradients waves but the main feature is that it can also generate Live animation for that.

css-waves-3

8. CSS Grid Generator

CSS grid

It generates the awesome css For Grid and you can customize it with div and it will also create the child element for that
css-grid

CSS Grid Area

It generates the grid-area for you. and you can name that and customize the area according to your need.

css-grid-area

9. Loading Animated GIFs/SVGs

Here you can generate multiple loading animation and download that as SVG, GIFs, PNG and other formats but the best feature of it is that you can customize these animation to the next level. You should try this.

loading

10. Free Icon Library

Flaticons

This Library have 5.7M+ vector icons. So you can find any possible icons here and you can use it.

flaticons

icons8

This library also has the vast collection of icons and you can customize them as well, also you can directly use that icon without downloading it.

icons8

Conclusion

I hope you learned something from this article, if yes them thumbs up. There are unlimited resources but I've covered only ten in this article. I'll cover them in the future articles. So consider to Follow.

You can now extend your support by buying me a Coffee.😊👇

Buy Me A Coffee

Also Read

Discussion (38)

Collapse
cuellar22 profile image
RAUL CUELLAR MORENO

Great! Thanks a lot

Collapse
j471n profile image
Jatin Sharma Author

It's my pleasure :)

Collapse
cesscode profile image
Cess

Nice article.. I wrote an article on something similar

dev.to/cesscode/useful-websites-ev...

Collapse
arvindpdmn profile image
Arvind Padmanabhan

Truly awesome!

Collapse
khojinet profile image
KHOJINET

Thanks for sharing.
first 5 are new to me, others I have used.

Collapse
whenixd profile image
Juan Carlos Manzanero Domínguez

Thanks, this will be useful 😄

Collapse
youngshittu profile image
YoungShittu

Thanks 🙏

Collapse
arsalan0974 profile image
arsalan0974

Thank you sir

Collapse
faizzi profile image
Faizzi

Thanks Sir

Collapse
everbliss7 profile image
Blessing Tayedzerwa

Thanks a million 🤗

Collapse
motuncoded profile image
motuncoded

Nice resource. Thank you ❣️

Collapse
tim012432 profile image
Timo

Thanks a lot for your article. Some of them I already knew. I will bookmark this blog article instead ;)

Collapse
j471n profile image
Jatin Sharma Author

Thank you, it means a lot :)

Collapse
jenningsf profile image
JenningsF

Great resources. Thanks! 🙌

Collapse
mastermind profile image
MasterMind

another useful one I'd like to suggest: haikei.app/

Collapse
j471n profile image
Jatin Sharma Author

Oh that's really awesome thanks man :)

Collapse
dotnetsafer profile image
Dotnetsafer

Amazing There are many that I did not know, thank you very much Jatin!

Collapse
j471n profile image
Jatin Sharma Author

I am glad you find it useful :)

Collapse
marcodeev profile image
Marcos

Gracias !!!

Collapse
yosi profile image
yosi

Bookmarked. 🚀

Collapse
j471n profile image
Jatin Sharma Author

Nice ;)

Collapse
dongphuchaitrieu profile image
Đồng Phục Hải Triều

Thanks a lot!

Collapse
makerfablabs profile image
Maker

Thank you.

Collapse
defe1980 profile image
Francesco

Thanks a lot

Collapse
maxrubino profile image
maxrubino

Great is not enough! Thank you.

Collapse
jotajeff profile image
Jeferson Silva

bravo. great article

Collapse
kolajo profile image
kolajo

This is awesome 👌

Collapse
aashishpanthi profile image
Aashish Panthi

Should I bookmark this article or those sites ? Just curious

Collapse
j471n profile image
Jatin Sharma Author

You can do both ;)

Collapse
pani profile image
pharmtechps

So so helpful- thank you :)

Collapse
j471n profile image
Jatin Sharma Author

I am glad it helped :)

Collapse
qq449245884 profile image
qq449245884

Dear Jatin Sharma,may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
j471n profile image
Jatin Sharma Author

Yeh sure i don't have any problem with that, go ahead, atleast mention me so that i can see it. 👍

Collapse
m1rels profile image
Mirel Korajac

Thank you! That‘ll definitely help me with my current project👍

Collapse
j471n profile image
Jatin Sharma Author

I am glad that it will help you, happy hacking ;)

Collapse
alexisabena profile image
alexisabena

I'm just a designer but a nice add up could be a lottie library, they are better than some gifs. Thanks for the content!

Collapse
j471n profile image
Jatin Sharma Author

Thanks for your suggestion :) I really appreciate it.

Some comments have been hidden by the post's author - find out more