Buat Gradien CSS yang Indah dengan Mudah

Hasilkan gradien linier, radial, dan kerucut yang menakjubkan dengan antarmuka intuitif kami. Salin kode CSS dan gunakan dalam proyek Anda secara instan.

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.

Kurang ke Konverter CSS

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

HEX ke RGB

Mengonversi kode warna HEX ke nilai RGB untuk pengembangan web

Konverter CSS ke Stylus

Ubah kode CSS Anda menjadi sintaks Stylus. Cepat, mudah, dan aman.

Teks ke Biner

Konversi teks ke kode biner dengan mudah