CSS Gradients | linear gradient colors
GradientBackgroundsCSSgradientsletyoudisplaysmoothtransitionsbetweentwoormorespecifiedcolors.CSSdefinesthreetypesofgradients:LinearGradients(goesdown/up/left/right/diagonally)RadialGradients(definedbytheircenter)ConicGradients(rotatedaroundacenterpoint)CSSLinearGradientsTocreatealineargradientyoumustdefineatleasttwocolorstops.Colorstopsarethecolorsyouwanttorendersmoothtransitionsamong.Youcanalsosetastartingpointandadirection(oranangle)alongwiththegradienteffect.Syntaxbackground-image:linear-...
Gradient Backgrounds
CSS gradients let you display smooth transitions between two or more specified colors.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point) CSS Linear GradientsTo create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Syntaxbackground-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direction - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:
top to bottom (default)
Direction - Left to Right
The following example shows a linear gradient that starts from the left. ...