Softonic

Generator Gradien CSS

Langkah 1 / 3
Tipe
Berikutnya

Latar belakang antarmuka modern jarang menggunakan warna datar; bagian utama, tombol, dan kartu hampir semuanya menggunakan gradien CSS. Generator ini memungkinkan Anda memilih jenis gradien linier atau radial, menambahkan sebanyak mungkin titik warna sesuai keinginan, mengatur sudut (untuk gradien linier) atau bentuk (untuk gradien radial), serta menyalin nilai background: linear-gradient(…) yang bersih untuk langsung dilekatkan ke dalam stylesheet Anda.

Cara membuat gradien CSS

  1. 1

    Pilih jenis gradien

    Linier (arah berdasarkan sudut) atau radial (lingkaran/elips).

  2. 2

    Atur sudut atau bentuk

    Linier: 0–360°. Radial: lingkaran atau elips.

  3. 3

    Tambahkan stop warna

    Setiap stop warna merupakan kombinasi dari warna dan posisi (0–100%). Gradien dua stop menjadi acuan dasar; gradien tiga stop atau lebih menghasilkan transisi yang lebih mulus.

  4. 4

    Salin CSS

    Hasilnya adalah satu nilai properti `background` yang dapat Anda tempelkan ke dalam berbagai file CSS.

Contekan sintaksis

/* Linier */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* Radial (lingkaran) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* Multi-titik */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

Sudut-sudut yang sesuai dengan intuisi

Sudut gradien CSS berbeda dari konsep trigonometri: 0deg mengarah ke atas (utara), 90deg mengarah ke kanan (timur), 180deg mengarah ke bawah, dan 270deg mengarah ke kiri.

Arah Sudut
Dari atas ke bawah 180 derajat
Dari bawah ke atas 0 derajat
Dari kiri ke kanan 90 derajat
Dari kiri atas ke kanan bawah 135 derajat

Menghindari nada tengah yang keruh

Gradien linier antara warna komplementer (misalnya biru → oranye) melewati zona abu-abu sekitar 50%, di mana perpaduan warnanya terasa “mati”. Perbaiki hal ini dengan cara berikut:

  • Menambahkan titik henti tengah dalam warna yang terkait (biru → ungu → oranye).
  • Menggunakan interpolasi OKLCH (linear-gradient(in oklch, ...)) untuk hasil perpaduan yang lebih halus secara perseptual, didukung di semua peramban modern sejak tahun 2024.
  • Menggeser sedikit salah satu ujung warna agar nada tengah berada dalam kelompok warna yang lebih hangat.

Tip kinerja

Gradien digambar oleh GPU dan umumnya memiliki biaya rendah. Namun, proses animasi terhadap satu gradien (misalnya menggunakan trik background-position atau efek kabur SVG) tetap dapat menimbulkan biaya pengolahan grafis; sebaiknya uji coba terlebih dahulu pada ponsel kelas menengah sebelum produk dikirimkan.

Pertanyaan yang Sering Diajukan

Gradien CSS mengukur sudut searah jarum jam dari bagian atas, sedangkan matematika standar mengukurnya berlawanan arah jarum jam dari sisi kanan. Dalam sistem CSS, nilai 90deg menunjukkan arah ke kanan; dalam trigonometri, nilai tersebut setara dengan 0°.

Spesifikasi memungkinkan jumlah berapa pun. Secara praktis, lebih dari 4–5 stop cenderung terasa seperti pelangi; sedangkan dua atau tiga stop yang dipilih dengan baik hampir selalu terlihat lebih rapi.

Ya, tempelkan sebagai nilai sembarang: class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]". Untuk gradien yang dapat digunakan kembali, definisikan utilitas khusus dalam konfigurasi Tailwind Anda.

Editor standar mengirim pengaturan gradien ke server untuk merender pratinjau. Dalam alur terpandu, tipe, sudut, bentuk, dan titik warna juga muncul di URL halaman. Jangan masukkan informasi sensitif; alat ini tidak menyimpan proyek gradien yang dapat digunakan kembali.

Alat Terkait

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Konverter Biner ke Oktal

Konversi biner ke oktal dengan mengelompokkan bit tiga per tiga. Berguna untuk izin Unix, sistem lama, dan tampilan angka ringkas.

Konverter Biner ke ASCII

Tempel data biner (bita dipisah spasi atau aliran bit panjang) dan dapatkan teks ASCII yang diwakilinya. Mendukung pengodean 7-bit dan 8-bit.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Konverter Base64 ke Hex

Konversi string Base64 menjadi byte dasarnya yang dinyatakan dalam heksadesimal (hex). Berguna untuk memeriksa token, kunci, sertifikat, dan JWT.