DEV Community

ajmompr
ajmompr

Posted on

TIL about building gradients in CSS

While creating my link-in bio project, I ran into some difficulty with styling my background to include an animated gradient, and I plan to discuss my roadblocks with a TA this week. Although I had issues figuring out the animated gradient, I did learn more about using the CSS linear-gradient function. through reading documentation on MDN!

Gradients allow developers to create smooth transitions between multiple colors, and there are 3 basic types of CSS gradients:

  1. Linear Gradients

  2. Radial Gradients

  3. Conic Gradients

Below is an example of a simple linear-gradient with two color stops:

.simple-linear {
  background: linear-gradient(blue, pink);
}
Enter fullscreen mode Exit fullscreen mode

The three CSS gradient functions include a number of properties that allow for endless customization!

Top comments (1)

Collapse
 
darrylw330 profile image
Darryl Williams

Amazing! The power of CSS is one of my favorite things about programming. It's fun to play around with the many different styles and attributes.

Retry later