vibecodai logovibecodai
← All CSS lessons

CSS · Lesson 5 · 10 min

Colors & Backgrounds

Gradients, hex colors, and background images.

You will learn

  • Use hex color codes
  • Create linear gradients
  • Style button backgrounds

Colors can be names (red), hex (#ff0000), or rgb(). linear-gradient() blends two colors for modern headers.

Edit CSS — live preview below

HTML context (read-only)
<header class="hero">
  <h1>Sunset App</h1>
  <button>Get started</button>
</header>
CSS
Live preview

Tip: Add a hover style: button:hover { transform: scale(1.05); }