DEV Community

HandsomeTan
HandsomeTan

Posted on

CSS3: linear-gradient and radial-gradient

I have used many css3 properties before, but soon forgot about them because many of them are complicated to remember, so I wanna to write blog to make it easier to remember them.
so let me first explain line-gradient:
background-image: linear-gradient(direction, color-step1, color-step2, ....)

  • direction: using angle to indicate the gradient direction whose values can be an angle or one of them: to left, to right, to top, to bottom. to bottom(180deg) is the default. 
  • color-step: the beginning color for gradient, consisting of two parts: color: valid css color value; length or percentage: the beginning position, not allowing negative value

examples(assuming height:100px)
background:linear-gradient(to bottom, red 0%,yellow 50%,green 100%); same to background:linear-gradient(180deg, red 0px, yellow 50px, green 100px);

linear-gradient illustration

repeatng-linear-gradient(): background: repeating-linear-gradient(red 0,red 10%,yellow 10%,yellow 20%);

repeatng-linear-gradient illustration

thease parameters represent 0% - 10% from red to red, 10% - 20% from yellow to yellow, and repeat this effect to cover entire element size.

radial-gradient()
this function parametes consist of five parts: shape, size, the position of circle center, color, color position.

  • shape: ellipse(default) or circle;
  • size: I prefer to call it as the increassing direction of radius of radial gradient, with possible values: farthest-corner(default), closest-corner, furthest-side, closest-side.
  • position: the center position of the radial gradient, (50%, 50%) is the default;
  • color and color position: same to linear-gradient;

the explanation of usage of radial gradient

radial gradient illustration

this effect is that the center position is located at (0,0) and gradient radius is equal to element's width;

And repeating-radial-gradient() is same to repeating-linear-gradient().

lastly, there is the compatibility of linear-gradient and radient-gradient(more about that on CanIuse website)

the illustration of compatibility of linear-gradient and radient-gradient

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)