Softonic

Generator Gradasi CSS

Langkah 1 / 2
Berikutnya

Gradasi bisa memberi tombol, kartu, bagian hero, dan lencana tampilan yang rapi tanpa satu pun file gambar. Generator ini menulis CSS untuk Anda: pilih gradasi linear atau radial, tentukan dua warna, atur sudutnya bila perlu, lalu salin deklarasi background yang dihasilkan langsung ke lembar gaya Anda.

Cara membuat gradasi

  1. 1

    Pilih jenis gradasi

    Linear untuk transisi lurus di sepanjang sudut, atau radial untuk menyebarkan warna ke luar dari titik pusat.

  2. 2

    Pilih dua warna

    Masukkan dua warna heksadesimal apa pun (misalnya #2563eb dan #16a34a) pada dua kolom warna.

  3. 3

    Atur sudutnya (khusus linear)

    Sudut dalam derajat: 0deg mengarah ke atas, 90deg ke kanan, 180deg ke bawah. Gradasi radial mengabaikan sudut.

  4. 4

    Hasilkan CSS

    Alat ini menyusun deklarasi `background:` dari nilai Anda.

  5. 5

    Salin kodenya

    Salin baris deklarasi dan tempel ke lembar gaya Anda, di dalam aturan untuk elemen yang ingin dirapikan.

Gradasi linear

background: linear-gradient(135deg, #2563eb, #16a34a);

Sudut berjalan searah jarum jam dari atas: 0deg = atas, 90deg = kanan, 180deg = bawah, 270deg = kiri. Anda juga bisa menulis arah bernama secara manual: to right setara 90deg dan to bottom left setara 135deg.

Gradasi radial

background: radial-gradient(circle, #2563eb, #16a34a);

Warna menyebar dari tengah elemen ke luar. Gradasi radial tidak memakai sudut; tambahkan kata kunci posisi atau ukuran secara manual (at 30% 40%, ellipse) saat butuh kontrol lebih.

Titik warna

Gradasi CSS menerima lebih dari dua warna, dan setiap titik bisa punya posisi:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Dua titik pada posisi yang sama membuat batas tegas: warna berubah seketika, bukan bercampur. Berguna untuk background terbelah.

Tips

  • Gradasi dari merah ke biru melewati titik tengah keabu-abuan pada interpolasi sRGB bawaan. Interpolasi dalam oklch membuat campurannya tetap berwarna: linear-gradient(in oklch, red, blue), didukung peramban modern.
  • transparent bukan tanpa warna: dalam sRGB nilainya rgba(0,0,0,0), jadi memudar ke transparent melewati abu-abu gelap. Gunakan rgba(color, 0) sebagai gantinya.
  • Gradasi dirender di GPU pada peramban modern, jadi hampir tidak memakan biaya dalam ukuran apa pun. Animasi antargradasi tidak didukung dan berubah mendadak; animasikan opacity lapisan tambahan sebagai gantinya.
  • Isian teks: gabungkan deklarasi dengan background-clip: text; color: transparent; untuk mengisi teks dengan gradasi. Untuk border, border-image: linear-gradient(...) 1; berfungsi di peramban modern.

Pertanyaan yang Sering Diajukan

Linear untuk campuran berarah, seperti tombol atau hero yang mengalir dari atas ke bawah atau dari sudut ke sudut. Radial untuk efek sorotan dan cahaya, tempat warna menyebar ke luar dari titik pusat.

Sudut menentukan arah transisi untuk gradasi linear: 0deg mengarah ke atas, 90deg ke kanan, dan seterusnya searah jarum jam. Gradasi radial mengabaikan sudut.

Interpolasi sRGB bawaan merata-ratakan komponen warna, sehingga menghasilkan titik tengah yang tidak jenuh. Interpolasikan dalam oklch sebagai gantinya (linear-gradient(in oklch, red, blue)) agar campurannya tetap berwarna di tengah.

CSS tidak bisa menginterpolasi antara dua nilai background-image, perubahannya mendadak. Cara umum: animasikan opacity gradasi yang ditumpuk, atau geser background-position pada gradasi tetap yang lebih besar.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

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.

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.