YouTip LogoYouTip

CSS3 Gradients and Shadows

Gradients

.linear { background: linear-gradient(to right, red, blue); }
.radial { background: radial-gradient(circle, red, blue); }

Shadows

.box-shadow { box-shadow: 2px 2px 10px rgba(0,0,0,0.3); }
.text-shadow { text-shadow: 2px 2px 4px #000; }

Summary

  • linear-gradient and radial-gradient create color blends
  • box-shadow and text-shadow add depth
← CSS3 Media QueriesCSS3 Transitions and Animation β†’