Summary of CSS gradient effects (linear-gradient and radial-gradient)

Linear-gradient

background-image: 
linear-gradient(to direction, start color, middle color 1, middle color 2, ... , end color);

Combination of four directions - eight directions
top, right, bottom, left

angle
90deg

radial-gradient

background-image: 
radial-gradient(size shape at direction, start color, middle color 1, middle color 2, ..., end color);

Size: a value for the radius of a circle or two values ​​for the semi-major and semi-minor axes of an ellipse as percentages/pixels

shape

circle
ellipse

Direction Percentage/Pixel

closest-side/closest-corner/farthest-side/farthest-corner

background-image: radial-gradient(800px circle at 50% 50%, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%); 

Summarize

This concludes this article about the summary of CSS gradient effects (linear-gradient and radial-gradient). For more relevant CSS gradient effect content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!