Loading Please Wait...
CSS gradients are represented by the gradient data type, a special type of image made of a progressive transition between two or more colors.
Gradients can be used anywhere you would use an , such as in backgrounds.
CSS defines three types of gradients:
To create the most basic type of gradient, all you need is to specify two colors. These are called color stops. You must have at least two, but you can have as many as you want.
direction: top, left, bottom, right, degree, turn
color-stops: any RGB, RGBA, HEX, HEXA, HSL, and HLA colors
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(blue, pink);
background: linear-gradient(to right, blue, pink);
background: linear-gradient(to bottom right, blue, pink);
background: linear-gradient(70deg, blue, pink);
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(to left, lime 28px, red 77%, cyan);
background: linear-gradient(to right, transparent, mistyrose), url("critters.png");
The repeating-linear-gradient() function is used to repeat linear gradients.
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background: radial-gradient(shape size at position, start-color, ..., last-color);
background: radial-gradient(red, blue);
background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige);
background: radial-gradient(ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige);
background: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige);
background: radial-gradient(ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige);
The repeating-radial-gradient() function is used to repeat radial gradients.
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center).
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
background: conic-gradient(red, blue);
background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
The repeating-conic-gradient() function is used to repeat conic gradients.
background-image: repeating-conic-gradient(red 10%, yellow 20%);
We can create mesh gradient by using stacked (multiple) gradients.
background: linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
background: radial-gradient(circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71%) beige;
border-radius: 50%;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved