Rancang gradien CSS dan salin kodenya
CSS gradient generator ini membuat latar <code>linear-gradient()</code>, <code>radial-gradient()</code>, dan <code>conic-gradient()</code> secara visual. Klik bilah stop untuk menambah warna, geser ke posisinya, atur opasitas tiap stop, lalu sesuaikan sudut, bentuk, atau titik tengah sementara pratinjau diperbarui langsung. Salin CSS dengan warna fallback solid, salin class Tailwind siap pakai, atau ekspor gradien sebagai PNG dalam ukuran apa pun. Tempel gradien dari stylesheet Anda untuk mengeditnya di sini. Semuanya berjalan lokal di browser Anda.
Cara membuat gradien CSS
- 1Pilih Linear, Radial, atau Conic, atau mulai dari salah satu preset.
- 2Klik di mana saja pada bilah stop untuk menambah color stop, geser stop untuk memindahkannya, dan tekan Delete pada stop yang difokuskan untuk menghapusnya. Tombol panah memindahkan stop sebesar 1%, Shift+panah sebesar 10%.
- 3Pilih warna dan opasitas setiap stop. Semua warna CSS bisa dipakai: hex,
rgb(),hsl(),oklch(), atau nama warna. - 4Atur sudut dengan dial (tahan Shift untuk melompat per 15°), atau untuk gradien radial dan conic, seret di pratinjau untuk memindahkan titik tengah.
- 5Salin CSS atau class Tailwind, atau tentukan lebar dan tinggi lalu unduh PNG.
Gradien linear, radial, dan conic
- linear-gradient()
- Warna berubah sepanjang garis lurus pada sudut tertentu. <code>0deg</code> mengarah ke atas, <code>90deg</code> ke kanan; kata kunci <code>to right</code> dan <code>to bottom left</code> berarti hal yang sama dalam bentuk kata. Garis gradien cukup panjang agar sudut-sudut kotak mendapat warna pertama dan terakhir.
- radial-gradient()
- Warna menyebar keluar dari titik tengah sebagai lingkaran atau elips. Kata kunci ukuran menentukan di mana 100% berada: <code>farthest-corner</code> (default) mencapai sudut terjauh kotak, <code>closest-side</code> berhenti di tepi terdekat.
- conic-gradient()
- Warna berputar mengelilingi titik tengah seperti jarum jam, dimulai dari sudut <code>from</code>. Hard stop menghasilkan diagram lingkaran dan roda warna tanpa gambar apa pun.
Color stop, tepi tajam, dan transparansi
Setiap color stop terdiri dari warna dan posisi. Di antara dua stop, browser memadukan warna secara halus; jika dua stop berada di posisi yang sama, warna berganti mendadak, dan begitulah garis-garis, bendera, serta diagram lingkaran digambar. Beri warna yang sama pada dua stop berdekatan untuk menahannya sebagai pita solid.
Stop bisa sebagian transparan, sehingga gradien dapat memudarkan gambar ke halaman atau menggelapkan bagian bawah gambar hero agar teks putih tetap terbaca. Browser modern memadukan stop transparan dalam warna premultiplied, jadi memudar ke transparent tidak lagi menjadi abu-abu di tengah, tetapi generator tetap menulis warna rgba() eksplisit agar jelas.
Gradien berulang
repeating-linear-gradient() beserta versi radial dan conic-nya mengulang pola antara stop pertama dan terakhir di seluruh kotak. Aktifkan Berulang dan pindahkan stop terakhir jauh sebelum 100%, misalnya ke 10%, untuk mendapatkan garis-garis, cincin, atau pola sinar matahari. Jika stop terakhir berada di 100%, gradien berulang terlihat persis seperti gradien biasa.
Warna fallback, Tailwind, dan ekspor PNG
Gradien adalah gambar, jadi browser yang tidak bisa menggambarnya tidak menampilkan apa pun di belakang teks Anda. Baris fallback opsional menetapkan background solid lebih dulu, memakai rata-rata stop Anda, dan baris gradien sesudahnya menimpanya di mana pun gradien didukung.
Keluaran Tailwind berupa class arbitrary value seperti bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Spasi diganti garis bawah karena nama class Tailwind tidak boleh berisi spasi; class ini bekerja di Tailwind 3 dan 4 tanpa konfigurasi apa pun.
Ekspor PNG menggambar gradien yang sama di canvas dengan ukuran pilihan Anda, hingga 8192 piksel per sisi, untuk wallpaper, gambar media sosial, atau alat desain yang tidak bisa membaca CSS. Pilih warna yang cocok untuk teks Anda dengan Cek Kontras Warna, ubah notasinya dengan Konversi Warna, atau tambahkan kedalaman dengan box shadow generator.
Mengedit gradien yang sudah ada
Tempel gradien ke Impor: linear-gradient(…) saja, deklarasi background: atau background-image: lengkap, versi berprefiks vendor -webkit-, atau class Tailwind bg-[…]. Arah seperti to top right, sudut dalam deg, turn, atau rad, stop dengan dua posisi, dan stop tanpa posisi semuanya terbaca. Posisi piksel dan color hint tidak bisa ditampilkan pada bilah persentase, jadi nilainya diperkirakan dan hasil impor akan memberi tahu Anda.
Pertanyaan yang sering diajukan
- Bagaimana cara membuat background gradien di CSS?
- Atur background (atau background-image) ke fungsi gradien, misalnya background: linear-gradient(90deg, #ff7e5f, #feb47b);. Generator ini menuliskan baris tersebut untuk Anda, dengan warna fallback solid opsional di depannya.
- Apa bedanya gradien linear, radial, dan conic?
- Gradien linear berubah warna sepanjang garis lurus, gradien radial menyebar keluar dari titik tengah dalam bentuk lingkaran atau elips, dan gradien conic berputar mengelilingi titik tengah seperti jarum jam.
- Bagaimana cara membuat tepi tajam atau garis-garis?
- Letakkan dua stop di posisi yang sama dengan warna berbeda. Untuk garis-garis berulang, aktifkan Berulang dan tempatkan stop terakhir di nilai kecil seperti 10%.
- Bisakah gradien CSS dibuat transparan?
- Bisa. Turunkan opasitas sebuah stop dan generator menuliskannya sebagai rgba(). Gradien dari sebuah warna ke transparan adalah cara umum untuk memudarkan gambar atau overlay ke halaman.
- Bagaimana cara memakai gradien di Tailwind CSS?
- Salin class Tailwind, berupa arbitrary value seperti bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], lalu tambahkan ke elemen Anda. Utilitas from-/via-/to- bawaan Tailwind hanya mencakup gradien linear sederhana; arbitrary value mendukung gradien apa pun.
- Apakah conic gradient berfungsi di semua browser?
- conic-gradient() berfungsi di semua versi terbaru Chrome, Edge, Firefox, dan Safari. Tambahkan warna fallback jika Anda masih mendukung browser yang sangat lama.
- Bisakah saya mengunduh gradien sebagai gambar?
- Bisa. Masukkan lebar dan tinggi lalu unduh PNG. Gambar dibuat di browser Anda dengan ukuran persis itu, hingga 8192 × 8192 piksel.
- Apakah ada yang diunggah?
- Tidak. Pratinjau, CSS, dan ekspor PNG semuanya dibuat di browser Anda.