Visual Fades: Exploring Gradients in CSS
Learn how to create smooth color transitions using `linear-gradient` and `radial-gradient`.
Visual Fades: Exploring Gradients in CSS
Gradients in CSS allow you to create smooth color transitions between two or more colors, enhancing the visual design of a web page.
The `linear-gradient` Function
The linear-gradient function creates a linear color transition. It takes a direction (e.g., `to right`) and at least two color stops. Example: linear-gradient(to right, red, blue).
The `radial-gradient` Function
The radial-gradient function creates a gradient that radiates from an origin. It can be a circle or ellipse. Example: radial-gradient(circle, yellow, green).
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
radial-gradient(circle, yellow, green)
linear-gradient(to right, red, blue)
Completa el código:
Linear transition:______
Radial transition:______
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
background: ;
Practice Example: Code Editor
Write a CSS style to apply a linear gradient from red to blue to the background of an element.