Gradients dan Modifikasi Warna

Linear Gradient

Gradient yang paling umum digunakan di UI:

/* Subtle gradient untuk background */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Gradient overlay pada gambar */
.image-overlay {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.7) 100%
  );
}

Kapan Menggunakan Gradient

Baik:

• Hero section background
• Card accent (border atau top bar)
• Button premium/CTA utama
• Overlay pada gambar

Hindari:

• Body text pada gradient background (readability buruk)
• Terlalu banyak gradient dalam satu halaman
• Gradient dengan warna yang "clash" (merah ke hijau)

Color Modification dengan HSL

HSL membuat modifikasi warna sangat mudah:

Tint (lebih terang) — naikkan Lightness:

--blue: hsl(220, 90%, 50%);
--blue-tint: hsl(220, 90%, 80%); /* Lightness naik */

Shade (lebih gelap) — turunkan Lightness:

--blue-shade: hsl(220, 90%, 30%); /* Lightness turun */

Muted (lebih kalem) — turunkan Saturation:

--blue-muted: hsl(220, 30%, 50%); /* Saturation turun */

Tips

1. Gradient halus lebih elegan — perbedaan warna kecil sudah cukup
2. Gradient angle 135deg atau to bottom right terlihat natural
3. Selalu test readability — teks harus tetap terbaca di atas gradient

Instagram terkenal dengan gradient logo-nya. Spotify menggunakan gradient subtil pada playlist covers.