Introduction

Hello Developers :)

I've created a list of 25 Free tools and resources which you can use in your next projects to make them more mesmerizing :)

So without any further ado, let's begin

Sites to learn from:

Websites are one of the best places to learn CSS, there are numorous websites where you can learn CSS from, some of them are -

• https://www.freecodecamp.org/

• https://www.w3schools.com/

• https://www.sololearn.com/

Icons

We can add Icons to our webpage to make them look better, some of the libraries from where you can get many icons are -

• https://fontawesome.com/

• https://icons8.com/icons/set/css

• https://icons.getbootstrap.com/

• https://css.gg/

• https://ikonate.com/

Gradients

Gradients are a progressive transition between two or more colours, the transition between the colours is usually smooth. In CSS there are 3 types of gradients: Linear gradient, Radial Gradient and Conical gradient.
Here are some tools which can be used to create gradients-

• https://mycolor.space/gradient

• https://www.css-gradient.com/

• https://learnui.design/tools/gradient-generator.html

• https://cssgradient.io/

Grid design:

The Grid layout is one of the fundamental properties of responsive web development.
Some tools which can be used to design grids are -

• https://griddy.io/

• https://angrytools.com/css-grid/

• https://grid.layoutit.com/

Animation maker:

With CSS animations, we can animate HTML elements' transition without using JavaScript in any way.
Some tools which can be used to create animations are -

• https://animista.net/

• https://www.toptal.com/developers/css3maker/css3-animation.html

• https://webcode.tools/generators/css/keyframe-animation

Colour pallets:

• https://mybrandnewlogo.com/color-palette-generator

• https://color.adobe.com/create/color-wheel

• https://mycolor.space/

Box-Shadow:

The Box-shadow CSS property is used to add a shadow effect on an element's frame, giving it a floating kind of effect.
Some tools which can be used to create box shadows are -

• https://css3gen.com/box-shadow/

• https://webcode.tools/generators/css/drop-shadow

• https://www.cssmatic.com/box-shadow

• https://html-css-js.com/css/generator/box-shadow/

Conclusion

So I presented a list of various tools and websites which can help you make better web design.

I hope that it helped you. Follow me so that you get notified when I publish my next article, also react to this article if you found it useful.

Thank you
(˵ ͡° ͜ʖ ͡°˵)