Pembuat Gradien CSS Buat gradien linier, radial, dan konik yang indah dengan beberapa pemberhentian warna dan kontrol sudut.

🎨

Pembuat Gradien CSS

Buat gradien linier, radial, dan konik yang indah dengan beberapa pemberhentian warna dan kontrol sudut.

Pilih tipe gradien

Pilih gradien linier, radial, atau konik dari selector tipe.

Tambahkan pemberhentian warna

Pilih warna dan sesuaikan posisinya sepanjang gradien menggunakan pemilih warna dan penggeser.

Salin CSS

Pratinjau hasilnya dan salin kode CSS yang dihasilkan dengan satu klik.

Loading tool...

What Is Pembuat Gradien CSS?

Generator Gradien CSS adalah alat visual untuk membuat gradien CSS yang indah tanpa menulis kode secara manual. Gradien adalah transisi halus antara dua atau lebih warna, digunakan secara luas dalam desain web modern untuk latar belakang, tombol, overlay, dan elemen dekoratif. Alat ini mendukung tiga jenis gradien: gradien linier yang mengalir dalam garis lurus dengan sudut apa pun, gradien radial yang memancar dari titik tengah, dan gradien konik yang menyapu sekitar titik tengah. Anda dapat menambahkan beberapa pemberhentian warna, menyesuaikan posisi mereka, dan mengatur sudut gradien untuk mencapai tampilan yang diinginkan. Alat ini menghasilkan CSS yang bersih dan kompatibel dengan browser lintas platform yang dapat Anda salin dan tempel langsung ke stylesheet Anda. Apakah Anda merancang latar belakang bagian hero, efek hover tombol, atau aksen UI yang halus, generator ini memberi Anda kontrol kreatif penuh atas gradien Anda.

Why Use Pembuat Gradien CSS?

Pembangun visual menghilangkan pekerjaan tebakan saat membuat gradien multi-stop kompleks
Mendukung tipe gradien linier, radial, dan konik dengan kontrol sudut penuh
Pratinjau waktu nyata menunjukkan secara tepat bagaimana gradien Anda akan terlihat
Salin satu klik menghasilkan kode CSS yang bersih dan siap produksi

Common Use Cases

Latar Belakang Bagian Hero

Buat latar belakang gradien yang menarik untuk bagian hero dan halaman pendaratan.

Pengaturan Gaya Tombol

Desain tombol yang diisi gradien sehingga menonjol dan menarik interaksi pengguna.

Overlay Kartu

Tambahkan overlay gradien ke gambar dan kartu untuk meningkatkan keterbacaan teks.

Pembangunan Tema Merek

Bangun palet gradien yang sesuai dengan warna merek Anda untuk desain yang konsisten.

Technical Guide

Gradien CSS didefinisikan menggunakan properti background atau background-image. Gradien linier menggunakan fungsi linear-gradient() dengan arah (sudut dalam derajat atau kata-kata seperti ke kanan) diikuti oleh pemberhentian warna. Setiap pemberhentian warna terdiri dari nilai warna dan posisi persentase opsional. Gradien radial menggunakan radial-gradient() dengan kata-kata bentuk (lingkaran atau elips) dan ukuran. Gradien konik menggunakan conic-gradient() untuk transisi warna menyapu. Beberapa pemberhentian warna menciptakan transisi kompleks - Anda dapat menggunakan dua pemberhentian pada posisi yang sama untuk batas warna keras. Untuk kinerja, gradien CSS dirender oleh browser dan tidak memerlukan unduhan gambar. Mereka independen resolusi dan terlihat tajam pada kepadatan tampilan apa pun. Gunakan awalan -webkit- untuk dukungan browser lama, meskipun browser modern mendukung gradien tanpa awalan. Gradien dapat dilapiskan menggunakan beberapa nilai background yang dipisahkan oleh koma, memungkinkan efek visual kompleks. Properti background-size mengontrol ukuran setiap lapisan gradien saat membuat pola berulang.

Tips & Best Practices

1
Gunakan setidaknya 3 pemberhentian warna untuk gradien yang lebih menarik dan terlihat alami
2
Atur sudut ke 135° untuk arah gradien diagonal populer
3
Lapis beberapa gradien untuk efek latar belakang kompleks
4
Gunakan transparan sebagai pemberhentian warna untuk membuat efek memudar

Related Tools

Pembuat Bayangan Kotak CSS

Buat bayangan kotak CSS dengan beberapa lapisan, opsi inset, dan pratinjau waktu nyata.

🎨 CSS & Design

Pembuat Efek Kaca Buram

Buat efek antarmuka kaca buram dengan kontrol kabur latar, transparansi, dan saturasi.

🎨 CSS & Design

Teks Gradien CSS

Buat teks dengan isi gradien menggunakan CSS background-clip dan text-fill-color.

🎨 CSS & Design

Polanya Latar Belakang CSS

Buat pola latar belakang CSS berulang, termasuk garis-garis, papan catur, titik-titik, dan lain-lain.

🎨 CSS & Design

Frequently Asked Questions

Q Apa tipe gradien CSS yang didukung?

Alat ini mendukung gradien linier, radial, dan konik dengan pemberhentian warna tak terbatas.

Q Bisakah saya menggunakan beberapa pemberhentian warna?

Ya, klik "Tambah Pemberhentian Warna" untuk menambahkan sebanyak mungkin warna yang Anda butuhkan. Setiap pemberhentian memiliki kontrol posisi sendiri.

Q Apakah gradien yang dihasilkan kompatibel dengan browser?

Ya, gradien CSS bekerja di semua browser modern. Alat ini menghasilkan kode CSS standar yang berfungsi tanpa awalan vendor.

Q Bisakah saya membuat gradien berulang?

Kode yang dihasilkan menggunakan fungsi gradien standar. Anda dapat secara manual mengubahnya menjadi repeating-linear-gradient() untuk efek berulang.

Q Bagaimana cara saya membuat gradien pada sudut tertentu?

Gunakan penggeser sudut untuk menyetel nilai apa pun dari 0 hingga 360 derajat. Nilai umum adalah 90° (kiri ke kanan), 180° (atas ke bawah), dan 135° (diagonal).

About This Tool

Pembuat Gradien CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.