Lesson 8 Practice Activities

CSS Gradients

This page demonstrates advanced CSS gradient techniques including generators, animations, gradient text, and gradient borders.

Buttons and Icons

Gradient Generator

Generated Gradient CSS
background: linear-gradient(90deg, #ff8a8a, #d10000);

Animated Gradients

Animated Gradient

background: linear-gradient(270deg, #ff8a8a, #d10000, #00994d);
background-size: 600% 600%;
animation: gradientShift 12s ease infinite;

Gradient Text

Beautiful Gradient Text

Gradient Text CSS

background: linear-gradient(to right, #ff8a8a, #d10000);
-webkit-background-clip: text;
color: transparent;

Gradient Borders

Gradient Border Box
Gradient Border CSS

border: 6px solid;
border-image: linear-gradient(to right, #ff8a8a, #d10000) 1;