Smooth Transitions

Gradients in CSS are not images, but programmatically generated backgrounds. They weigh zero bytes and look sharp on any screen.

1. linear-gradient Syntax

/* Direction, Color 1, Color 2 */
background: linear-gradient(to right, #ff9a9e, #fecfef);
background: linear-gradient(45deg, #2af598, #009efd);

2. Color Stops

You can control at what point one color transitions to another. If you put two colors at the same point, you get a sharp edge.

/* Striped background */
background: linear-gradient(to bottom, #333 50%, #eee 50%);