CSS3 gradients display smooth transitions between two or more specified colors producing a nice effect. Earlier, you had to use background images for these effects. By using CSS3 gradients, you can reduce download time and bandwidth usage to download background gradient images.
Elements created with CSS3 gradient appear much smoother than gradient background images, as they are generated by web browsers and do not degrade their quality. It is the most suited way to create responsive web designs where element shape and size change with the devices.
There are two types of CSS gradients:
You can create both of these types of gradients with this tool – https://tools.webdevpuneet.com/css-gradient-generator/
1. Linear Gradients:
Direction from top-to-bottom, bottom-to-top, left-to-right, right-to-left, diagonal to some degree.
2. Radial Gradients:
From center to the farthest side, can be positioned horizontally and vertically.
Repeated Gradients
Both types of gradients can be set to repetition, to get that repeat or zebra-line effect.
More Screenshots:
Screenshot of more gradients create by this gradient generator tool – https://tools.webdevpuneet.com/css-gradient-generator/
