Example 1: how to insert gradient in css
body{
/*Radial Gradient*/
background-image: radial-gradient(#EA52F8 5.66%, #0066FF 94.35%);
/*Linear Gradient*/
background-image: linear-gradient(45.34deg, #EA52F8 5.66%, #0066FF 94.35%);
}
Example 2: linear gradient css
/* A gradient tilted 100 degrees,
starting gray and finishing black */
.class {
background: linear-gradient(100deg, rgba(63, 63, 63, 0.8) 0%, rgba(255, 255, 255, 0) 25%);
}
/* A gradient going from the bottom to top
starting red and finishing orange */
.class {
background: linear-gradient(to top, #f32b60, #ff8f1f);
}
Example 3: website gradient
Here a codePen with cool gradient animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM
Example 4: uigradients
background: #0f2027; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0f2027, #203a43, #2c5364); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0f2027, #203a43, #2c5364); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
Example 5: ui gradient
background: #000428; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #000428, #004e92); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #000428, #004e92); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */