10 CSS Resources that you should bookmark
Tags: css, webdev, beginners, tutorial
Published: 2021-10-24 02:53:51

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](https://neumorphism.io/)

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

![neumorphism](https://i.imgur.com/9Azvowr.png)

### [2. Shadows Brumm](https://shadows.brumm.af/)

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

![shadows brumm](https://i.imgur.com/2wiFPyS.png)

### [3. CSS Clip-path Maker](https://bennettfeely.com/clippy/)

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](https://i.imgur.com/RHi4NE3.png)

### [4. Fancy Border Shape Generator](https://9elements.github.io/fancy-border-radius/)

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](https://i.imgur.com/Mi3hNOb.png)

### [5. Cubic Curve](https://cubic-bezier.com/)

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](https://i.imgur.com/RdpTDJl.png)

### [6. CSS Gradient](https://cssgradient.io/)

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](https://i.imgur.com/GXQ30rQ.png)

### 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](https://getwaves.io/)

It generates simple waves with some customization.

![css-waves-1](https://i.imgur.com/SIACH2I.png)

#### [Gradient Multiple Waves](https://www.softr.io/tools/svg-wave-generator)

It can generate multiple gradient waves which is awesome.

![css-waves-2](https://i.imgur.com/BKLsLsw.png)

#### [Multiple Animated Waves](https://svgwave.in/)

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

![css-waves-3](https://i.imgur.com/Qj9Fcft.png)

### 8. CSS Grid Generator

#### [CSS grid ](https://cssgrid-generator.netlify.app/)

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](https://i.imgur.com/SkTnHrb.png)

#### [CSS Grid Area](https://grid.layoutit.com/)

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

![css-grid-area](https://i.imgur.com/Bl6WXfY.png)

### [9. Loading Animated GIFs/SVGs](https://loading.io/)

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](https://i.imgur.com/qApN28O.png)

### 10. Free Icon Library

#### [Flaticons](https://www.flaticon.com/)

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

![flaticons](https://i.imgur.com/lm8Tz78.png)

#### [icons8](https://icons8.com/)

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](https://i.imgur.com/8gyhKQb.png)

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

<blockquote>
<p>You can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" loading="lazy" width="545" height="153"></a>


#### Also Read

- [CSS Gradient Loading Animation](https://dev.to/j471n/css-gradient-loading-animation-2695)
- [Some Javascript Methods you should know](https://dev.to/j471n/some-javascript-methods-you-should-know-i15)
- [10 Git Commands everybody should know](https://dev.to/j471n/10-git-commands-everybody-should-know-3322)