CSS Dasar #12 - Gradient: Linear Gradient dan Radial Gradient

byFerdian Rahabista -
0

Setelah kita mempelajari background warna dan gambar, sekarang saatnya mengenal gradient. Gradient adalah perpaduan dua atau lebih warna secara bertahap. Dengan gradient, kita bisa membuat background yang modern dan menarik tanpa menggunakan file gambar. Gradient sangat populer di website modern untuk hero section, tombol, kartu, dan elemen dekoratif lainnya.

Apa Itu Gradient?

Gradient adalah efek transisi warna dari satu warna ke warna lain (atau lebih) secara bertahap. CSS menyediakan dua jenis gradient utama:

  • Linear Gradient → gradien dalam garis lurus (horizontal, vertikal, atau diagonal)
  • Radial Gradient → gradien melingkar dari pusat ke tepi
Kelebihan Gradient dibanding Gambar:
  • Ukuran file lebih kecil (tidak perlu download gambar)
  • Mudah diatur (warna, arah, sudut)
  • Responsif secara otomatis (menyesuaikan ukuran elemen)
  • Dapat di-animasi dengan CSS

1. Linear Gradient

Linear gradient menciptakan transisi warna dalam garis lurus. Arahnya bisa diatur (ke kanan, ke kiri, ke bawah, ke atas, atau sudut tertentu).

Sintaks Dasar:

background: linear-gradient(arah, warna1, warna2, warna3, ...);

Contoh Linear Gradient:

<style>
    .gradient-1 { background: linear-gradient(red, blue); }
    .gradient-2 { background: linear-gradient(to right, red, blue); }
    .gradient-3 { background: linear-gradient(to bottom right, red, blue, green); }
    .gradient-4 { background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec489a); }
    .gradient-5 { background: linear-gradient(90deg, #ff7e5f, #feb47b); }
</style>
top to bottom
left to right
diagonal
45 degree
90 degree

Arah Linear Gradient

Kita bisa mengatur arah gradient dengan beberapa cara:

Arah Nilai Hasil
Ke bawah (default) to bottom atau tanpa arah Atas ke bawah
Ke atas to top Bawah ke atas
Ke kanan to right Kiri ke kanan
Ke kiri to left Kanan ke kiri
Diagonal to bottom right Kiri atas ke kanan bawah
Sudut 45deg, 90deg, dll Sudut 45 derajat

Linear Gradient dengan Banyak Warna

Kita bisa menggunakan lebih dari dua warna dalam satu gradient.

Contoh:

<style>
    .rainbow { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); }
    .sunset { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb); }
    .pastel { background: linear-gradient(120deg, #a8edea, #fed6e3); }
</style>
Pelangi
Sunset
Pastel

Linear Gradient dengan Color Stop

Kita bisa menentukan posisi spesifik di mana warna berubah menggunakan color stop (dalam persen atau pixel).

Contoh:

<style>
    .stop-25 { background: linear-gradient(to right, red 25%, blue 75%); }
    .stop-50 { background: linear-gradient(to right, red 50%, yellow 50%); }
    .multiple { background: linear-gradient(to right, red 0%, yellow 50%, green 100%); }
</style>
merah 25% | biru 75%
merah 50% | kuning 50%
merah → kuning → hijau
Tips Linear Gradient:
  • Gunakan to right untuk gradien horizontal, to bottom untuk vertikal
  • Gunakan deg untuk kontrol sudut yang presisi
  • Color stop memungkinkan transisi warna yang tegas atau gradual

2. Radial Gradient

Radial gradient menciptakan transisi warna melingkar dari pusat ke tepi. Bentuknya bisa lingkaran (circle) atau elips (ellipse).

Sintaks Dasar:

background: radial-gradient(shape, warna1, warna2, ...);

Contoh Radial Gradient:

<style>
    .radial-1 { background: radial-gradient(red, blue); }
    .radial-2 { background: radial-gradient(circle, red, blue, green); }
    .radial-3 { background: radial-gradient(ellipse, #ff7e5f, #feb47b); }
    .radial-4 { background: radial-gradient(circle at top left, red, blue); }
    .radial-5 { background: radial-gradient(circle at 20% 30%, red, yellow, blue); }
</style>
ellipse (default)
circle
posisi top left
posisi 20% 30%

Posisi Radial Gradient

Pusat radial gradient bisa diatur dengan at diikuti posisi.

Posisi Nilai Hasil
Pusat (default) at center Gradien dari tengah
Pojok kiri atas at top left Gradien dari pojok kiri atas
Pojok kanan bawah at bottom right Gradien dari pojok kanan bawah

Radial Gradient dengan Color Stop

Sama seperti linear gradient, kita bisa menentukan posisi perubahan warna.

Contoh:

<style>
    .stop-radial { background: radial-gradient(circle, red 20%, yellow 50%, blue 80%); }
    .hard-stop { background: radial-gradient(circle, red 50%, blue 50%); }
</style>
color stop bertahap
hard stop (tegas)

Contoh Proyek: Website Modern dengan Gradient

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Gradient - Website Modern</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }
        
        /* HERO SECTION dengan Linear Gradient */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 100px 20px;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        /* CONTAINER */
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 60px 20px;
        }
        
        /* SECTION TITLE */
        .section-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 40px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        
        /* CARD GRID */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        
        .card:hover {
            transform: translateY(-8px);
        }
        
        .card-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .card h3 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .card p {
            color: #64748b;
        }
        
        /* BUTTON GRADIENT */
        .btn-gradient {
            display: inline-block;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .btn-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102,126,234,0.4);
        }
        
        /* CTA SECTION dengan Radial Gradient */
        .cta {
            background: radial-gradient(circle at 30% 10%, #f093fb, #f5576c);
            color: white;
            text-align: center;
            padding: 80px 20px;
        }
        
        .cta h2 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .cta p {
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .btn-white {
            display: inline-block;
            background: white;
            color: #f5576c;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: transform 0.3s;
        }
        
        .btn-white:hover {
            transform: translateY(-2px);
        }
        
        /* FEATURE SECTION dengan Gradient Background */
        .feature-section {
            background: linear-gradient(120deg, #a8edea, #fed6e3);
            border-radius: 24px;
            padding: 40px;
            margin-top: 40px;
        }
        
        .feature-section h3 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .feature-item {
            background: rgba(255,255,255,0.8);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
        }
        
        /* INFO BOX */
        .info-box {
            background: #eef2ff;
            padding: 30px;
            border-radius: 16px;
            margin-top: 50px;
        }
        
        .info-box h3 {
            margin-bottom: 20px;
            color: #1e293b;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        .info-box pre {
            background: #1e1e2e;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 10px 0;
            font-size: 13px;
        }
        
        footer {
            background: #1e293b;
            color: #94a3b8;
            text-align: center;
            padding: 30px;
            margin-top: 50px;
        }
        
        @media (max-width: 768px) {
            .hero h1 { font-size: 32px; }
            .section-title { font-size: 28px; }
        }
    </style>
</head>
<body>

    <section class="hero">
        <h1>CSS Gradient Modern</h1>
        <p>Linear Gradient dan Radial Gradient untuk website yang menarik</p>
    </section>

    <div class="container">
        <h2 class="section-title">Fitur Unggulan</h2>
        <div class="card-grid">
            <div class="card">
                <div class="card-icon">🎨</div>
                <h3>Linear Gradient</h3>
                <p>Gradien dalam garis lurus, bisa diatur arah dan sudutnya.</p>
            </div>
            <div class="card">
                <div class="card-icon">⚪</div>
                <h3>Radial Gradient</h3>
                <p>Gradien melingkar dari pusat ke tepi.</p>
            </div>
            <div class="card">
                <div class="card-icon">🎯</div>
                <h3>Color Stop</h3>
                <p>Tentukan posisi spesifik perubahan warna.</p>
            </div>
        </div>
        
        <a href="#" class="btn-gradient" style="display: block; width: fit-content; margin: 40px auto 0;">Mulai Belajar</a>
    </div>

    <section class="cta">
        <h2>Siap Membuat Website Keren?</h2>
        <p>Gunakan gradient untuk membuat website Anda lebih modern dan menarik</p>
        <a href="#" class="btn-white">Daftar Sekarang</a>
    </section>

    <div class="container">
        <div class="feature-section">
            <h3>Kenapa Menggunakan Gradient?</h3>
            <div class="feature-list">
                <div class="feature-item">🎯 Loading lebih cepat</div>
                <div class="feature-item">🔄 Responsif otomatis</div>
                <div class="feature-item">🎨 Kustomisasi mudah</div>
                <div class="feature-item">✨ Tampilan modern</div>
            </div>
        </div>
        
        <div class="info-box">
            <h3>Gradient yang Digunakan di Halaman Ini:</h3>
            <ul>
                <li><code>linear-gradient(135deg, #667eea 0%, #764ba2 100%)</code> → hero section</li>
                <li><code>linear-gradient(135deg, #667eea, #764ba2)</code> → gradient text pada section title</li>
                <li><code>linear-gradient(135deg, #667eea, #764ba2)</code> → tombol gradient</li>
                <li><code>radial-gradient(circle at 30% 10%, #f093fb, #f5576c)</code> → CTA section</li>
                <li><code>linear-gradient(120deg, #a8edea, #fed6e3)</code> → feature section</li>
            </ul>
            
            <h3 style="margin-top: 20px;">Ringkasan Gradient CSS:</h3>
            <ul>
                <li><code>linear-gradient(arah, warna1, warna2, ...)</code> → gradien lurus</li>
                <li><code>radial-gradient(bentuk, warna1, warna2, ...)</code> → gradien melingkar</li>
                <li><code>to right, to bottom, to bottom right</code> → arah linear gradient</li>
                <li><code>45deg, 90deg, 135deg</code> → sudut linear gradient</li>
                <li><code>circle, ellipse</code> → bentuk radial gradient</li>
                <li><code>at center, at top left</code> → posisi radial gradient</li>
            </ul>
        </div>
    </div>

    <footer>
        <p>© 2024 - Belajar CSS Gradient | Linear Gradient & Radial Gradient</p>
    </footer>

</body>
</html>

Hasil visual website:

CSS Gradient Modern

Linear Gradient dan Radial Gradient

Feature Section dengan Linear Gradient
Gradient yang Digunakan: linear-gradient(135deg, #667eea, #764ba2), radial-gradient(circle, #f093fb, #f5576c)

Tabel Ringkasan Gradient

Jenis Sintaks Contoh
Linear Gradient linear-gradient(arah, warna...) linear-gradient(to right, red, blue)
Linear dengan sudut linear-gradient(sudut, warna...) linear-gradient(45deg, red, blue)
Linear dengan color stop linear-gradient(arah, warna posisi...) linear-gradient(to right, red 30%, blue 70%)
Radial Gradient radial-gradient(bentuk, warna...) radial-gradient(circle, red, blue)
Radial dengan posisi radial-gradient(bentuk at posisi, warna...) radial-gradient(circle at top left, red, blue)

Kesalahan Umum Pemula

  • Lupa tanda koma antar warna → linear-gradient(red blue) (salah) vs linear-gradient(red, blue) (benar).
  • Lupa tanda derajat (deg) pada sudut → linear-gradient(45, red, blue) (salah) vs linear-gradient(45deg, red, blue) (benar).
  • Lupa tanda persen pada color stop → linear-gradient(red 30, blue 70) (salah) vs linear-gradient(red 30%, blue 70%) (benar).
  • Mengira radial gradient default adalah lingkaran → Default adalah ellipse, bukan circle. Gunakan circle jika ingin lingkaran sempurna.
  • Lupa menulis at untuk posisi radial gradient → radial-gradient(circle top left, red, blue) (salah) vs radial-gradient(circle at top left, red, blue) (benar).
Debugging Tips:
  • Gunakan Developer Tools (F12) → inspect elemen → lihat apakah properti background gradient muncul di panel Styles
  • Jika gradient tidak muncul, coba tulis ulang sintaks dengan hati-hati
  • Gunakan CSS Gradient Generator online untuk membantu membuat gradient yang rumit

Latihan Singkat

  1. Buat linear gradient horizontal dari merah ke biru
  2. Buat linear gradient diagonal (135 derajat) dari kuning ke hijau
  3. Buat linear gradient dengan 4 warna (pelangi)
  4. Buat radial gradient lingkaran dari putih ke hitam
  5. Buat radial gradient dengan pusat di pojok kiri atas
  6. Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

  • Linear Gradient → gradien dalam garis lurus (horizontal, vertikal, diagonal)
  • Radial Gradient → gradien melingkar dari pusat ke tepi
  • Arah linear gradient: to right, to bottom, to bottom right, atau sudut seperti 45deg
  • Bentuk radial gradient: circle (lingkaran) atau ellipse (elips, default)
  • Posisi radial gradient: at center, at top left, at 20% 30%
  • Color stop menentukan posisi perubahan warna (dalam persen atau pixel)
  • Gradient modern, ringan, dan responsif — sangat direkomendasikan untuk website modern
Tantangan: Buat sebuah Landing Page Kreatif dengan berbagai efek gradient! Persyaratan:
  • Hero section dengan linear gradient 3 warna (misal: biru, ungu, pink)
  • Section "Layanan" dengan kartu-kartu yang memiliki background linear gradient
  • Section "Testimoni" dengan radial gradient sebagai background
  • Tombol CTA dengan gradient dan efek hover
  • Gradient text pada heading (gunakan background-clip: text)
  • Footer dengan linear gradient yang berbeda
  • Tambahkan efek animasi pada gradient (opsional, menggunakan transition)
  • Tambahkan kotak penjelasan yang mendokumentasikan semua gradient yang digunakan

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #11 - Background: background-color, background-image, background-repeat, background-position, background-size
Artikel Selanjutnya: CSS Dasar #13 - Typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال