Update 14/05/2021 : Click for new resources not in this list.
Resources listed in this post:-
16.CSS Button Generators -- Another Related Post
19.Animation Resources --Another Related Post
21.Color Gradient Generators --Another Related Post
22.Color Palette Generators --Another Related Post
23.SVG Shape Generators --Another Related Post
24.SVG Background Generators --Another Related Post
25.SVG Illustrations Resources --Another Related Post
The below site help you to generate overlay effect for your images using CSS filter code. You can create overlay by adjusting various parameters like brightness, contrast, grayscale, hue-rotation, opacity, saturation, blur etc. of the overlay. The overlay can contain gradient colors also. The css code for the overlay will also contain browser prefixed codes, so that the overlay will be supported in wide range of browsers.
In the current situation the number of different types of devices accessing the web is large and they have different screen layout also. So we cannot use a single layout for all the devices, this cause designing responsiveness for the web project a challenging one. We use media queries to achieve responsiveness. The media queries required for a fluid responsive designing can be complex and time consuming as the number of devices we are targeting get bigger. The below listed resources will help you to generate CSS media query code with ease. They help you to create device specific or general media query quickly, that can be pasted directly into your projects.
Free CSS spinners that can be used in your web projects, they can be used as pre loaders also.
Using different fonts in your web design can make the look of your website better, but if the fonts you use don't compliment each other, it will make the design awful. So it's better to try out various combinations before selecting. These links will help you to play with various fonts, mixing them to create beautiful patters that can make your web project awesome.
Click to expand Font Generators / Mixers Resources
1. Brand Mark
2. Mix Font
5. Font Joy
Box shadow will help to create a 3D effect for your web components and texts in your web project, to design one which is good for the web project is a time taking one, the below resources will help to generate box shadows quickly and easily, the generated code can be used directly into the style sheet.
Click to expand Box Shadow Generator Resources
2. CSS3 Studio
3. Enjoy CSS
Meta tags are important for SEO, their are a large number of meta tags available we may not know how to configure them. The below links will help you to generate general, important meta tags based on your inputs.
Favicons are small 16x16 icon files that are displayed next to the URL of your site in a browser's address bar, the below sites helps you to create favicons.
Click to expand Free Favicon Maker Resources
2. Free Logo Maker text only
Websites that help to create profile pictures.
Neumorphism is a design trend which is marked by minimal and realistic-looking UI. A few sites that help to generate css code for the neumorphism design is listed below.
The below links help to create dual tone effect using css.
These links help to generate triangle shapes using html and css, you can use the shape by simply copying the code to your project.
These links help to generate underlines and animations that can be applied on underlines in CSS.
The below links help to generate beautiful hamburger menus icon.
The links help to create beautiful html tables. The links help to generate both the html code for table and CSS code to style the tables based on your preferences.
The below links will help to design various buttons based on your preferences, these links generate CSS code of your designs, which can be copied into your projects. Various hover effect can also be generated using the links.
Click to Expand CSS Button Resources List
1. Doodle Nerd
1. Doodle Nerd
The below resources help you to get CSS code to animate various components of your web projects.
The below links provide with mostly free icon resources, which can be used in web projects.
Click to Expand Icon Resources List
3. Jam Icons
4. Line Icons
12. Icon Ninja
14. Captain Icon Web
15. Font Awesome
These links help to generate color gradients, the gradients can be created based on adjusting the controls provided by respective sites. You can create 2 color based or multiple color based gradients using various web sites provided in the list. Some websites also provide with wide range of pre created color gradients that can be copy pasted into your web projects. Click the arrow button section to expand the resources list.
The below links will help to generate color palette, which can make your web project awesome.
Click to Expand Color Palette Resources List
4. 0 To 255
20. Color Mixer
The below links will help to generate different svg shapes, sites will generate svg code for the shapes you generate, some sites also let you download the design in image format also. Click the arrow button section to expand the resources list.
Click to Expand SVG Shapes Resources List
#### 1. Blob Maker
13. Shape Divider
The links below will help you to generate beautiful backgrounds in svg format. Most of the sites have controls that let you design the backgrounds, generated images can be downloaded in multiple formats.
Click to Expand SVG Background Resources List
14. Bg Siteorigin
16. Pattern Monster
18. Pattern Ninja
Here I list more than 30+ resources that will help you to get free illustrations for your web projects. Most of these resources provide free contents. Most of the illustrations can me downloaded as SVG format or PNG format, which is better than JPG format, using svg/png format help to increase website performance when compare to one using JPG images. Also svg scale well no need to separate files to create responsiveness. Please click the below arrow to expand the resource list
Click to Expand Illustration Resources List
2. Draw Kit
5. open Doodles
7. IRA Design
11. Gee Me
13. The Noun project
26. Pixel True
28. Story Set
29. Open Peeps