Gradasi CSS adalah transisi halus antara dua warna atau lebih yang dapat digunakan sebagai gambar latar belakang. CSS mendukung gradasi linear (warna mengalir dalam garis lurus), gradasi radial (warna memancar dari titik tengah), dan gradasi konik (warna berputar di sekitar pusat). Gradasi tidak bergantung pada resolusi dan merender dengan tajam di semua ukuran layar.

Pembuat Gradasi

Buat transisi warna sambil melihat perubahannya. Generator Gradien MiniWebtool memungkinkan Anda memosisikan titik warna, menyesuaikan sudut, dan mencoba prasetel, lalu mengekspor gradien sebagai kode CSS, Tailwind, atau SVG.

Belum tahu cara menggunakannya? Tanya AI

Gemini (salin dan buka)

Di Gemini, tempelkan pertanyaan yang disalin ke chat. Anda juga dapat menyalinnya di bawah.

Lihat pertanyaan

Saya ingin memahami cara menggunakan alat Pembuat Gradasi dari MiniWebtool: https://miniwebtool.com/id/pembuat-gradasi/. Apa kegunaannya, masukan atau pengaturan apa yang diperlukan, dan bagaimana cara menggunakan alat ini serta memahami hasilnya? Jelaskan dengan satu contoh sederhana langkah demi langkah. Gunakan halaman ini sebagai sumber dan jawab dalam bahasa Indonesia.

Gratis 3× per hariTidak perlu mendaftarHasil instan

Pembuat GradasiCoba sekarang — gratis ▼

Kartu

Tombol

Warna Awal

Warna Akhir

Penghenti Warna Klik untuk menambah penghenti

Sudut

90°

Sudut Cepat

Preset Gradasi

Embed Pembuat Gradasi Widget

Tentang Pembuat Gradasi

Selamat datang di Pembuat Gradasi, alat desain kelas profesional untuk membuat gradasi CSS yang indah. Baik Anda memerlukan gradasi latar belakang yang halus untuk situs web Anda, efek tombol yang cerah, atau bagian hero yang memukau, alat ini memberi Anda kontrol kreatif penuh dengan pratinjau waktu nyata dan berbagai format ekspor.

Sekilas

Pembuat Gradasi membuat gradasi warna linear dan radial dengan titik henti warna serta sudut yang dapat disesuaikan, lalu mengeluarkan hasilnya sebagai kode CSS, Tailwind CSS, atau SVG. Pratinjau langsung diperbarui saat Anda mengedit.

Pembuat Gradasi: fitur sekilas
Fitur	Yang didapat	Cocok untuk
Titik henti warna	Klik bilah gradasi untuk menambahkan titik henti, seret titik untuk memindahkannya, dan hapus titik tengah dengan tombol yang muncul saat kursor diarahkan.	Transisi halus atau batas warna yang tajam
Linear dan radial	Pilih gradasi linear untuk campuran berarah atau gradasi radial yang menyebar keluar dari titik pusat.	Latar belakang, tombol, serta efek sorotan dan kilau
Dial sudut	Seret dial visual untuk mengatur sudut apa pun dari 0 sampai 360 derajat, atau pilih preset: 0, 45, 90, 135, 180, 225, 270, atau 315.	Mengatur arah gradasi tanpa mengetik derajat
16 preset	Mulai dari preset bernama seperti Purple Haze, Ocean Blue, Fresh Mint, dan Neon, lalu sesuaikan sesukanya.	Mulai dari skema warna siap pakai
Tiga format ekspor	Salin gradasi sebagai properti latar belakang CSS, sebagai kelas utilitas Tailwind CSS atau nilai arbitrer, atau sebagai kode SVG.	Menempelkan gradasi ke situs web, proyek Tailwind, atau grafis
Pratinjau bentuk langsung	Pratinjau diperbarui saat Anda mengedit, dan lapisan bentuk menunjukkan tampilan gradasi pada elemen antarmuka.	Menilai gradasi pada tombol dan kartu sebelum disalin

Fitur Utama

Penghenti Warna Interaktif

Klik di mana saja pada batang gradasi untuk menambahkan penghenti warna baru. Seret penghenti untuk memposisikannya kembali, menciptakan transisi halus atau batas warna yang tajam. Hapus penghenti tengah dengan mengklik tombol hapus yang muncul saat kursor diarahkan.

Kontrol Sudut yang Presisi

Gunakan dial sudut yang intuitif untuk menetapkan arah gradasi yang tepat, atau pilih dari sudut prasetel (0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°) untuk arah yang umum. Dial visual memungkinkan Anda menyempurnakan sudut untuk hasil yang sempurna piksel.

Preset Gradasi Pilihan

Mulailah dengan 16 preset gradasi yang dirancang secara profesional termasuk pilihan populer seperti Purple Haze, Ocean Blue, Fresh Mint, dan Neon. Setiap preset berfungsi sebagai titik awal yang dapat Anda sesuaikan lebih lanjut.

Beberapa Format Ekspor

CSS - Properti latar belakang CSS standar yang siap ditempel
Tailwind CSS - Kelas utilitas atau nilai arbitrer untuk proyek Tailwind
SVG - Gradasi yang tidak bergantung pada resolusi untuk ikon dan grafik

Cara Menggunakan Alat Ini

Pilih tipe gradasi: Pilih Linear untuk gradasi searah atau Radial untuk gradasi melingkar.
Pilih warna Anda: Gunakan pemilih warna atau masukkan nilai hex secara langsung untuk warna awal dan akhir Anda.
Atur sudut: Untuk gradasi linear, seret dial sudut atau klik sudut prasetel.
Tambahkan penghenti warna: Klik pada batang gradasi untuk menambahkan warna perantara untuk gradasi yang kompleks.
Pratinjau: Perhatikan pembaruan gradasi Anda secara real-time. Aktifkan hamparan bentuk untuk melihat tampilannya pada elemen UI.
Ekspor: Salin kode CSS, Tailwind, atau SVG dengan satu klik.

Memahami Gradasi CSS

Gradasi Linear

Gradasi linear mengubah warna di sepanjang garis lurus. Sudut menentukan arahnya:

background: linear-gradient(sudut, penghenti-warna1, penghenti-warna2, ...);

Tip: 0° mengarah ke atas, 90° mengarah ke kanan, 180° mengarah ke bawah, 270° mengarah ke kiri. Anda dapat menggunakan sudut apa pun dari 0° hingga 360°.

Gradasi Radial

Gradasi radial mengubah warna ke arah luar dari titik pusat dalam pola melingkar atau elips:

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

Penghenti Warna

Penghenti warna menentukan di mana setiap warna muncul dalam gradasi. Mereka terdiri dari nilai warna dan persentase posisi opsional:

#ff0000 0% - Merah di awal
#00ff00 50% - Hijau di tengah
#0000ff 100% - Biru di akhir

Praktik Terbaik untuk Desain Gradasi

Harmoni Warna

Warna analog: Warna yang bersebelahan pada roda warna menciptakan gradasi yang halus dan alami
Warna komplementer: Warna yang berlawanan menciptakan gradasi yang cerah dan kontras tinggi
Monokromatik: Nuansa berbeda dari satu warna menciptakan gradasi yang halus dan elegan

Pertimbangan Aksesibilitas

Pastikan kontras yang cukup antara latar belakang gradasi dan teks
Hindari menempatkan konten penting pada transisi gradasi yang kompleks
Uji gradasi dengan alat aksesibilitas untuk memeriksa rasio kontras warna

Tips Performa

Gradasi CSS lebih efisien daripada file gambar
Gradasi merender pada resolusi asli di semua perangkat
Gunakan gradasi sebagai pengganti gambar latar belakang yang besar jika memungkinkan

Pola Gradasi Umum

Gradasi Tombol

Tombol biasanya menggunakan gradasi halus yang mencerah ke arah atas, menciptakan efek 3D "timbul". Gunakan sudut sekitar 180° (atas ke bawah) dengan warna yang lebih terang pada 0%.

Gradasi Latar Belakang

Latar belakang halaman penuh sering kali menggunakan gradasi diagonal (135° atau 45°) dengan warna-warna lembut dan redup yang tidak mengganggu konten.

Hamparan Kartu

Kartu gambar sering kali menggunakan gradasi yang memudar dari transparan ke gelap di bagian bawah, membuat teks putih mudah dibaca di atas foto.

Pertanyaan yang Sering Diajukan

Apa itu gradasi CSS?

Gradasi CSS adalah transisi halus antara dua warna atau lebih yang dapat digunakan sebagai gambar latar belakang. CSS mendukung gradasi linear, radial, dan konik. Gradasi tidak bergantung pada resolusi dan tampil tajam di semua ukuran layar.

Apa perbedaan antara gradasi linear dan radial?

Gradasi linear bertransisi sepanjang garis lurus pada sudut tertentu. Gradasi radial bertransisi ke luar dari titik pusat dalam bentuk melingkar atau elips. Linear ideal untuk latar belakang, sedangkan radial menciptakan efek sorotan.

Bagaimana cara menggunakan penghenti warna dalam gradasi?

Penghenti warna menentukan posisi setiap warna (0% hingga 100%). Menyesuaikan posisi ini memungkinkan Anda mengontrol di mana satu warna mulai memudar ke warna berikutnya.

Bisakah saya menggunakan gradasi di Tailwind CSS?

Ya, Tailwind menyediakan kelas bawaan seperti bg-gradient-to-r atau mendukung gradasi kustom menggunakan kurung siku untuk nilai arbitrer.

Bagaimana cara kerja sudut gradasi?

Sudut dimulai dari 0° (ke atas) dan bertambah searah jarum jam. 90° adalah ke kanan, 180° ke bawah, dan 270° ke kiri.

Apakah gradasi CSS lebih baik daripada gambar gradasi?

Ya, gradasi CSS lebih cepat dimuat, menggunakan lebih sedikit data, dan selalu tajam di layar apa pun karena dihasilkan secara matematis oleh browser.

Sumber Daya Tambahan

Dokumentasi Web MDN: Gradasi CSS

Kutip konten, halaman, atau alat ini sebagai:

"Pembuat Gradasi" di https://MiniWebtool.com/id/pembuat-gradasi/ dari MiniWebtool, https://MiniWebtool.com/

oleh tim miniwebtool. Diperbarui: 23 Jan 2026

Mengobrol dengan AI favorit Anda