Preview

CSS yang dihasilkan

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Kontrol Gradien

135°
0%
100%

Preset Populer

Contoh Gradien

Jelajahi contoh gradien yang menakjubkan ini dan dapatkan inspirasi untuk proyek Anda berikutnya. Klik pada gradien apa pun untuk memuatnya ke dalam generator.

Tersipu matahari terbenam

Gradien hangat yang terinspirasi oleh matahari terbenam yang indah.

Angin Laut

Gradien tenang yang membangkitkan perasaan perairan pesisir.

Perpaduan Mint

Gradien segar dan modern yang menggabungkan mint dan biru langit.

Taman Rimbun

Gradien semarak yang mewakili keindahan alam.

Mimpi Kosmik

Gradien ajaib yang terinspirasi oleh langit malam.

Jam Emas

Gradien hangat menangkap esensi senja.

Dokumentasi Gradien

Apa itu Gradien CSS?

Gradien CSS memungkinkan Anda menampilkan transisi yang mulus antara dua warna atau lebih. Mereka dapat digunakan sebagai latar belakang untuk elemen dan tersedia dalam tiga jenis berbeda:

  • Gradien Linier:Transisi warna di sepanjang garis lurus.
  • Gradien Radial:Transisi warna dari titik tengah ke luar.
  • Gradien Kerucut:Transisi warna di sekitar titik tengah dalam lingkaran.

Cara Menggunakan Gradien

Setelah Anda membuat gradien menggunakan alat kami, Anda dapat menggunakan kode CSS dalam proyek Anda:

  1. Salin kode CSS dari generator.
  2. Tempelkan ke file CSS Anda, atau gunakan sebaris di elemen HTML Anda.
  3. Terapkan gradien ke elemen apa pun menggunakanbackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Gunakan lebih dari dua warna untuk efek gradien yang lebih kompleks.
  • Sesuaikan posisi warna untuk mengontrol di mana transisi terjadi.
  • Gabungkan beberapa gradien untuk efek yang lebih kreatif.
  • Untuk gradien kerucut, mengubah pusat menciptakan pola yang menarik.
  • Simpan gradien favorit Anda untuk digunakan nanti.

Dukungan Browser

Gradien CSS didukung secara luas di browser modern. Namun, browser lama seperti Internet Explorer mungkin tidak merendernya dengan benar. Selalu berikan warna penggantian:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Tentang Alat Ini

Generator Gradien CSS kami dirancang untuk membantu pengembang dan desainer membuat gradien yang indah dengan mudah. Apakah Anda sedang mengerjakan situs web, aplikasi, atau hanya ingin bereksperimen dengan warna, alat ini memudahkan untuk menghasilkan gradien yang sempurna untuk proyek Anda.

Features

Mudah Digunakan

Antarmuka intuitif untuk membuat gradien.

Desain Responsif

Bekerja dengan sempurna di semua ukuran layar.

Siap Salin-Tempel

Dapatkan kode CSS yang bersih secara instan.

Preset Tersedia

Mulailah dengan gradien yang telah ditentukan sebelumnya yang indah.

Related Tools

Generator Transisi CSS3

Transisi opasitas yang mulus

Konverter Stylus ke CSS

Ubah kode SCSS Anda menjadi CSS. Cepat, mudah, dan aman.

Hasilkan Transformasi CSS3 dengan Mudah

Alat yang kuat dan intuitif untuk membuat transformasi CSS3 yang kompleks tanpa menulis kode. Visualisasikan perubahan secara real-time dan salin CSS yang dihasilkan untuk digunakan dalam proyek Anda.

Efek Teks Glitch CSS

Buat efek glitch yang menakjubkan untuk teks Anda dengan generator interaktif ini. Sempurna untuk cyberpunk, game, atau desain apa pun yang membutuhkan tampilan edgy dan futuristik.

Biner ke Hex

Konversi kode biner ke heksadesimal dengan mudah

Kalkulator Interval Keyakinan

Hitung interval kepercayaan untuk data sampel Anda dengan presisi dan mudah.