tigtools

Generator Gradien CSS

Pilih warna dan posisi, tentukan jenis gradien, lalu salin CSS yang siap digunakan.

Berjalan di browser Anda Tanpa perlu mendaftar

Jenis
135°
Titik warna
  1. Titik 1
    #0b5d1e
    0%
    100%
  2. Titik 2
    #f2c14e
    100%
    100%
Gradien di sini harus memiliki 2 hingga 6 titik.

Cara menggunakan

  1. Pilih linear, radial, atau conic, lalu atur sudut atau posisi titik tengah.
  2. Atur warna, opasitas, dan posisi setiap titik warna. Tambahkan hingga enam titik warna atau hapus yang tidak diperlukan.
  3. Periksa pratinjau, lalu salin baris CSS ke stylesheet Anda.

Cara kerja

Hasilnya berupa deklarasi background CSS standar. Gradien linear mengikuti sudut: 0deg bergerak dari bawah ke atas, 90deg dari kiri ke kanan, dan 180deg dari atas ke bawah. Gradien radial menyebar dari titik tengah dalam bentuk lingkaran atau elips yang menyesuaikan kotak. Gradien konik berputar mengelilingi titik tengah, dimulai dari sudut yang dipilih. Efek ini berguna untuk tampilan seperti diagram lingkaran dan roda warna.

Titik warna ditulis sesuai urutan posisinya, sehingga Anda dapat menggeser posisinya dengan bebas. Titik warna dengan opasitas yang dikurangi ditulis sebagai rgba(), sehingga latar belakang di bawahnya tetap terlihat. Dua titik warna di posisi yang sama akan menghasilkan batas tegas tanpa perpaduan warna, seperti pada pola garis-garis.

Ketiga fungsi gradien ini berfungsi di semua browser terkini. Secara default, gradien berbaur dalam ruang warna sRGB, yang dapat membuat warna di antara warna komplementer tampak agak keabu-abuan (misalnya biru dan kuning). Tambahkan titik warna tengah dengan warna yang lebih cerah untuk menghindarinya.

Contoh

Latar belakang header yang lembut

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) menghasilkan gradasi lembut dari atas ke bawah yang menjaga teks gelap tetap mudah dibaca.

Garis-garis dengan batas tegas

Gunakan empat titik warna: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Dua titik warna pada posisi 50% bertemu tanpa perpaduan, sehingga menghasilkan dua bidang warna solid.

Efek sorotan

Gradien radial (circle at top left) dari rgba(255, 255, 255, 0.6) ke rgba(255, 255, 255, 0) yang ditumpuk di atas warna menghasilkan cahaya lembut di sudut.

Pertanyaan yang sering diajukan

Ke arah mana 0deg?

Dalam CSS, 0deg mengarah ke atas, jadi gradien dimulai dari bawah dan berakhir di atas. 90deg bergerak dari kiri ke kanan. Ini berbeda dengan beberapa aplikasi desain, yang biasanya mengartikan 0° sebagai arah dari kiri ke kanan.

Bisakah gradien digunakan pada teks?

Ya: terapkan background, lalu tambahkan background-clip: text dan color: transparent. Pastikan teks tetap mudah dibaca di atas halaman pada setiap bagian gradien.

Apakah saya perlu prefiks vendor seperti -webkit-linear-gradient?

Tidak. Browser terkini mendukung sintaks tanpa prefiks. Prefiks hanya diperlukan untuk browser yang sudah sangat lama.

Privasi

Semua dibuat di browser Anda. Warna dan pengaturan Anda tidak dikirim atau disimpan.