CSS Gradients

CSS Gradients

To 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.

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.

CSS Linear Gradients CSS Radial Gradients


The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow:

#grad {
  background-image: linear-gradient(red, yellow);



3D Effect

Portal scene

UI Design