CSS: Linear Gradient
Random Linear Gradient Generator
Syntax
background-image: repeating-linear-gradient(
?direction,
color1 ?stop1,
color2 ?stop2,
etc
);
parameters:
- ?direction (optional): an Angle Unit e.g.
90deg, orto bottom,to right bottom, etc. Default isto bottom. - color: CSS Color.
- ?stop (optional): percentage or CSS Length Unit.
example:
.xbasic8100 { background-image: linear-gradient(90deg, red, white); height: 32px; }
Direction value
Direction value by degree
180deg means 6 o'clock direction. (the default)
Positive values increases clock-wise.
by words
to direction
direction is any of
top
bottom
left
right
or a combination of 2 of them.
Evenly Divided Smooth Gradiants
In this example, the box is evenly divided into 5 colors.
This is equivalent to:
Specify Color Stops
Normally, the different colors are evenly divided along 2 end points in a given direction. The starting color is at 0%. The ending color is at 100%.
You can specify the position on the gradient line for each color. In this example, we use the same 5 colors, but with red starting at 80%.
Example. Color Stops
Here we specify 2 color stops. Red at 80% and green at 95%.
Sharp Color Change
When 2 color stops are at the same position, you have a sharp color change. Here, both red and green are at 80%.
First Color's Color Stop
If the first color has a color stop other than 0%, than all colors before it is the same.
Example. Color stops by pixel unit
gradient Using oklch color
Browsers Support
- As of 2013-03-28, Firefox, Google Chrome, Opera, supports it.