Cascading Style Sheets/Gradients

<gradient> = [ <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()> ] A gradient is drawn into a box with the dimensions of the concrete object size, referred to as the gradient box. However, the gradient itself has no natural dimensions. linear-gradient linear-gradient-syntax <linear-gradient-syntax> = [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list> <side-or-corner> = [left | right] || [top | bottom] Angle and to side-or-corner relation: 0deg is equivalent to to top. 90deg is equivalent to to right. 180deg is equivalent to to bottom. 270deg is equivalent to to left. 360deg brings you back to to top again. Use the background image property to create a linear, radial or conic gradient. Use the linear-gradient keyword to create a linear gradient. Use -moz-, -o-, and -webkit- as a prefix to the linear-gradient keyword for support on older browsers #corpnav, #searchbar { color: #999; background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for Opera 11.1 and 12 */ background-image: -moz-linear-gradient(top,rgb(49,49,49),rgb(7,7,7)); /* for Firefox 3.6-15 */ background-image: -webkit-linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for Chrome 10-25, Safari 5.1 and 6 */ background-image: linear-gradient(top,rgb(100,100,100),rgb(200,200,200)); /* for IE 10+, Edge, Safari 6.1+, Opera 12.1+, Chrome 26+, Firefox 16+ */ } color-interpolation-method:drafts.csswg org: css-color-4 developer.mozilla : CSS hue-interpolation-method <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ] <rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65 <polar-color-space> = hsl | hwb | lch | oklch <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ] <rectangular-color-space> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65 <polar-color-space> = hsl | hwb | lch | oklch <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue Smooth or striped gradient /* This is smooth */ background: linear-gradient(deepskyblue, tomato); /* This is striped */ background: linear-gradient(deepskyblue 50%, tomato 50%); non repeating Two color continous gradients Css codedescriptionPreview imagelinear-gradient(in lab to right, white, #01E) CIE Lab gradient, which avoids the too-dark midpoint but has a significant purple cast;linear-gradient(in srgb to right, white, #01E)gamma-encoded sRGB gradient, is too dark at the midpoint, is a little desaturated, and has a slight purplish castlinear-gradient(in Oklab to right, white, #01E)Oklab gradient, giving a more perceptually uniform result with no purple cast at alllinear-gradient(in Oklab to right, #44C, #795)Oklab gradient, perceptually uniform result with no purple cast at alllinear-gradient(in Oklab to right, black, #01E)Oklab gradient, perceptually uniform result Gray gradients in various color spaces srgb srgb-linear display-p3 a98-rgb prophoto-rgb rec2020 labOklab gradient, perceptually uniform result xyz xyz-d50 xyz-d65 hsl shorter huehsl longer huehsl increasing huehsl decreasing hue hwb shorter huehwb longer huehwb increasing huehwb decreasing hue to do: hwb, lch, oklch. x shorter | longer | increasing | decreasing ] hue Css codedescriptionPreview imagelinear-gradient(in Oklab to right, black, white)Oklab gradient, perceptually uniform result linear-gradient(in lab to right, black, white)lab gradient, linear-gradient(in srgb to right, black, white)srgb gradientlinear-gradient(to right, hsla(0, 0%, 0%, 0.8), transparent)linear-gradient(in srgb to right, black, white) linear-gradient(cyan, yellow); combining easing functions and multiple color stops to create approximations that look smoother than plain linear-gradientsEasing Linear Gradients by Andreas Larsen on May 8, 2017 (Updated on May 12, 2017) Multicolor gradients ( multi-position color-stops), continous and striped Css codedescriptionPreview image linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); VIBGYOR rainbow linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75%); the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect. conic gradients multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect Color wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like hsl(), hwb(), or lch(). RGBA color wheel Color wheels are convenient for comparing colors expressed in polar or cylindrical coordinates, like hsl(), hwb(), or lch(). HSLA color wheels HSL color wheel Hue is changing from 0 to 360 degrees saturation is constant and max = 100 % lightness is constant and max = 100% longer hue interpolation method Links conic-gradient by Lea Verou References CSS3 Linear Gradients