Generator gradien CSS

Rancang gradien linear, radial, atau konik dan salin CSS-nya.

Tipe

Sudut: 135 derajat

Titik warna

100%

CSS

background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);

File Anda tetap di perangkat Anda

Cara kerjanya

1Pilih linear, radial, atau konik.
2Atur sudut, atau bentuk untuk radial.
3Pilih warna dan seret tiap titik ke posisinya. Tambah titik dengan Tambah titik warna.
4Salin CSS dan tempel ke stylesheet Anda.

Linear: Warna berpadu sepanjang garis lurus. Sudut menentukan arah: 0 derajat ke atas, 90 ke kanan, 180 ke bawah.
Radial: Warna menyebar dari tengah, berbentuk lingkaran atau elips.
Konik: Warna menyapu mengelilingi pusat seperti roda warna atau diagram lingkaran. Sudut memutar titik awalnya.
Titik warna: Tiap titik adalah warna pada posisi dari 0 sampai 100 persen. Hingga delapan.

Semua berjalan di browser Anda. Tidak ada yang Anda ketik dikirim ke server.

Browser mana yang mendukung gradien ini?

Gradien linear dan radial berfungsi di setiap browser terkini. Gradien konik berfungsi di semua versi terkini Chrome, Edge, Firefox, dan Safari.

Bagaimana membuat tepi tegas, bukan perpaduan?

Letakkan dua titik pada posisi yang sama, misalnya merah di 50% dan biru di 50%. Tidak ada jarak perpaduan di antaranya, sehingga perubahannya tajam.

Bisakah dipakai sebagai warna teks atau border?

Bisa. Gunakan nilai yang sama pada background-image, bersama background-clip: text untuk teks, atau border-image untuk border.

Mengapa halaman menampilkan warna berbeda dari yang saya pilih?

Pemilih warna memakai nilai hex sRGB. Layar dengan jangkauan warna lebar dapat menampilkannya sedikit berbeda, tetapi nilai CSS-nya tepat.

Bagaimana menambahkan transparansi?

Alat ini menghasilkan warna hex solid. Edit kodenya dan ubah warna menjadi hex delapan digit seperti #4f46e580, atau ke rgba().