Pembuat gradien CSS
Buat gradien CSS yang indah dengan pratinjau
Pengaturan gradien
Titik warna
Titik warna 1
Titik warna 2
Preset gradien
Tips gradien
Gunakan gradien linear untuk transisi warna searah yang mulus.
Gradien radial cocok untuk membuat efek sorotan atau fokus.
Gradien kerucut sangat pas untuk roda warna dan pola bersudut.
Atur posisi titik warna untuk mengendalikan sebaran warna gradien.
Gunakan warna dengan rona serupa untuk gradien halus atau warna kontras untuk efek tegas.
Pratinjau langsung
Singkatan CSS
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);Properti CSS
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);Kelas CSS
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}Atur warna dan posisi. Pratinjau diperbarui saat Anda bekerja.
Tentang Pembuat gradien CSS
Dengan pembuat gradien CSS gratis ini, Anda dapat dengan mudah membuat transisi warna yang indah dan mulus untuk proyek web apa pun. Buat gradien linear, gradien radial, dan gradien konik dengan kendali penuh atas warna, posisi, arah, dan sudut, semuanya dengan pratinjau visual real time.
Baik Anda membutuhkan latar belakang dua warna yang halus maupun gradien multi-stop yang kompleks, alat ini memberi Anda hingga 10 titik warna dengan kontrol posisi yang presisi. Pilih templat preset seperti Matahari terbenam, Samudra, Hutan, dan Hujan ungu, atau gunakan pembuat acak untuk menemukan kombinasi warna gradien yang unik untuk desain Anda.
Pembuat ini langsung menghasilkan kode gradien CSS yang bersih, yang dapat Anda salin dengan satu klik atau unduh sebagai gambar PNG. Tersedia beberapa format keluaran, termasuk shorthand background, properti background-image, dan kelas CSS siap pakai. Semua pemrosesan berjalan di browser Anda tanpa perlu mengunggah ke server.
Fitur utama
- Dukungan untuk tipe gradien linear, radial, dan konik dengan penyesuaian penuh
- Hingga 10 titik warna dengan kontrol posisi individual untuk desain gradien yang presisi
- 8 preset arah untuk gradien linear ditambah input sudut kustom
- Kontrol bentuk (lingkaran/elips) dan posisi gradien radial
- Gradien konik dengan sudut awal yang dapat diatur untuk efek roda warna
- 4 gradien preset bawaan: Matahari terbenam, Samudra, Hutan, dan Hujan ungu
- Pembuat gradien acak untuk inspirasi dan eksplorasi kreatif
- Pratinjau real time yang diperbarui seketika saat Anda mengubah pengaturan
- Salin sekali klik dengan beberapa format keluaran CSS (shorthand, properti, kelas)
- Unduh gradien sebagai gambar PNG beresolusi tinggi (800x600)
Cara menggunakan Pembuat gradien CSS
- Pilih tipe gradien: Pilih Linear, Radial, atau Konik dari pemilih tipe untuk menentukan gaya gradien Anda.
- Atur arah atau posisi: Untuk gradien linear, pilih arah atau sudut kustom. Untuk radial, pilih bentuk dan posisi. Untuk konik, atur sudut awal.
- Tambah dan sesuaikan warna: Gunakan pemilih warna untuk menentukan warna gradien dan seret nilai posisi untuk mengatur di mana setiap warna muncul.
- Pratinjau real time: Lihat pratinjau gradien diperbarui seketika saat Anda mengubah warna, posisi, dan pengaturan.
- Salin kode CSS: Klik tombol Salin untuk menyalin sintaks gradien CSS ke papan klip dalam format pilihan Anda.
- Unduh sebagai gambar: Klik Unduh untuk menyimpan gradien Anda sebagai gambar PNG untuk dipakai di alat desain atau presentasi.
Kasus penggunaan
- Latar belakang situs web: Buat bagian hero, header, dan latar belakang satu halaman penuh yang menarik perhatian dengan transisi warna yang mulus.
- Gaya tombol: Rancang tombol gradien yang menonjol dan mengarahkan pengguna ke ajakan bertindak.
- Aksen kartu dan komponen: Tambahkan border gradien, overlay, atau warna aksen pada kartu dan komponen UI.
- Efek teks: Gunakan gradien CSS dengan background-clip untuk membuat efek teks gradien yang penuh warna.
- Indikator pemuatan: Buat latar belakang gradien beranimasi untuk skeleton screen dan status pemuatan.
- Grafis media sosial: Unduh gambar gradien untuk postingan, story, dan foto sampul di media sosial.
- Warna sistem desain: Tetapkan token gradien yang konsisten untuk bahasa desain merek Anda.
- Slide presentasi: Buat latar belakang gradien untuk presentasi berbasis web dan portofolio.
Pertanyaan yang sering diajukan
Apakah alat ini gratis?
Ya, Pembuat gradien CSS sepenuhnya gratis. Tidak ada batas penggunaan, tidak ada tanda air pada unduhan, dan tidak perlu mendaftar akun.
Apakah data saya aman?
Seluruh pembuatan gradien dan perenderan gambar berlangsung langsung di browser Anda. Tidak ada data warna, kode CSS, atau gambar yang diunggah ke server mana pun, sehingga pekerjaan Anda tetap sepenuhnya privat.
Apa perbedaan antara gradien linear, radial, dan konik?
Gradien linear mentransisikan warna sepanjang garis lurus ke arah tertentu. Gradien radial memancar dari titik pusat ke luar dalam bentuk lingkaran atau elips. Gradien konik menyapukan warna mengelilingi titik pusat seperti roda warna.
Berapa banyak warna yang bisa saya gunakan dalam gradien?
Anda dapat menggunakan 2 hingga 10 titik warna dalam satu gradien. Setiap titik memiliki pemilih warna dan slider posisinya sendiri untuk kontrol transisi yang presisi.
Apakah gradien CSS didukung di semua browser?
Gradien linear dan radial didukung di semua browser modern. Gradien konik juga didukung secara luas di versi terbaru Chrome, Firefox, Safari, dan Edge.
Tips & praktik terbaik
- Gunakan rona yang mirip untuk efek halus: Warna yang berdekatan pada roda warna menghasilkan gradien yang mulus, elegan, dan terasa alami.
- Batasi titik warna: Dua hingga tiga warna biasanya menghasilkan hasil yang paling bersih. Titik yang lebih banyak dapat membuat transisi keruh jika posisinya tidak diatur dengan cermat.
- Tetapkan warna cadangan: Selalu sertakan background-color solid sebelum deklarasi gradien Anda untuk browser yang mungkin tidak merendernya.
- Coba radial untuk efek sorotan: Gradien radial cocok untuk menarik perhatian ke tengah suatu bagian atau menyorot area fokus.
- Uji di beberapa layar: Gradien dapat tampak berbeda di berbagai monitor dan layar seluler, jadi selalu pratinjau di berbagai perangkat.
- Gunakan pembuat acak: Klik Acak untuk menemukan kombinasi warna tak terduga yang mungkin belum Anda pertimbangkan.