Jump to main content

Gradients and Transitions

Gradients

Gradients are created by starting with one color and transitioning to another color (which can happen potentially many times).
They can be linear, angled, circular, and ellipse.
Gradients leverage the background property.

Gradient Type	Values
linear-gradient	If a direction or degree (e.g., to right, to bottom right, 180deg) is desired this is the first value. The direction or degree is then followed by colors. Colors can be paired with a location (e.g., 40%) where they begin.
radial-gradient	The first value indicates how big the ending shape should be: `closest-side` - The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses) `closest-corner` - The gradient's ending shape is sized so it exactly meets the closest corner of the box from its center `farthest-side` - Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides) `farthest-corner` - The gradient's ending shape is sized so it exactly meets the farthest corner of the box from its center The above keyword is also paired up with a size unit, which determines where the gradient intercepts the containing element The remaining values are colors for the gradient

linear-gradient Example

See the Pen Linear Gradient by Jason Withrow (@jwithrow) on CodePen.

radial-gradiant Example

See the Pen Radial Gradient by Jason Withrow (@jwithrow) on CodePen.

Transitions

Transitions are triggered on hover and/or focus, determining how the browser visually shifts from the current appearance to the hover and/or focus appearance.
Essentially, they add visual appeal to what would otherwise be an immediate style change. That said, it is easy to overdo these, or otherwise implement them poorly (for example, having the transition be very slow), and annoy the user.

Property	Usage and Effect	Values
transition-duration	The number of seconds for the transition (higher values mean that the transition is more drawn out)	Number (decimal values are fine) followed by `s`, such as `1.25s`
transition-property	Specifies the CSS property that will trigger a transition when its value changes or `all`	Name of the property or `all`
transition-timing-function	Specifies the speed curve of the transition effect	`ease` - slow start, then fast, then end slowly (the default) `linear` - same speed from start to finish `ease-in` - slow start `ease-out` - slow finish `ease-in-out` - slow start and finish `cubic-bezier(n,n,n,n)` - set custom values in a cubic-bezier function
transition	Shorthand for the other properties	Sequence is typically property, then duration, then timing function (values are space-separated)

transition Example

See the Pen Transitions by Jason Withrow (@jwithrow) on CodePen.