🎨 Pembuat Gradien CSS

°

Warna Berhenti

Gradien Preset

Berbagai Jenis

Mendukung tipe gradien CSS linier, radial, dan kerucut.

Kontrol Yang Tepat

Sesuaikan posisi sudut dan warna dengan bebas untuk mendapatkan gradien piksel sempurna.

Pratinjau Langsung

Lihat perubahan gradien secara real-time saat Anda menyesuaikan parameter.

Salin Sekali Klik

Kode CSS yang dihasilkan siap untuk ditempelkan langsung ke proyek Anda.

Pemrosesan file lokal

Semua pemrosesan terjadi secara lokal di browser Anda. Tidak ada data yang diunggah ke server mana pun.

Sepenuhnya Gratis

Tanpa registrasi, tanpa batasan. Gratis untuk digunakan selamanya.

Artikel Terkait

Panduan Lengkap Gradien CSS: Dari Linear ke Conic

Panduan komprehensif untuk ketiga jenis gradien CSS, termasuk sintaksis, parameter, dan contoh praktis.

Panduan Lengkap (bahasa Inggris)

Tren Desain Gradien: Menciptakan Efek Visual Modern

Jelajahi tren desain gradien saat ini, mulai dari gradien lembut hingga perpaduan warna yang berani, dan temukan inspirasi desain Anda.

Tren Desain (bahasa Inggris)

Praktik Terbaik Kinerja Gradien CSS: Optimasi Rendering

Pahami bagaimana gradien CSS memengaruhi performa rendering halaman dan pelajari cara menulis gaya gradien performa tinggi.

Pertunjukan (bahasa Inggris)

Gradien dan Aksesibilitas: Mendesain untuk Semua Orang

Pelajari cara menggunakan gradien sambil memastikan aksesibilitas web dan kepatuhan WCAG.

Aksesibilitas (bahasa Inggris)

Pertanyaan umum

Apa itu gradien CSS?
Gradien CSS adalah efek latar belakang yang dibuat dengan CSS yang melakukan transisi mulus antara dua warna atau lebih. Tipe umum meliputi gradien linier, gradien radial, dan gradien kerucut.
Apa perbedaan antara gradien linier dan radial?
Gradien linier bertransisi sepanjang garis lurus (dengan sudut yang dapat disesuaikan), transisi gradien radial keluar dari titik pusat dalam lingkaran atau elips, dan gradien berbentuk kerucut berputar mengelilingi titik pusat.
Berapa banyak perhentian warna yang dapat saya tambahkan?
Tidak ada batasan tegas, tetapi disarankan 2-5 penghentian warna untuk efek visual terbaik. Terlalu banyak perhentian dapat membuat gradien terlihat berantakan.
Browser mana yang mendukung CSS yang dihasilkan?
Semua browser modern (Chrome, Firefox, Safari, Edge) sepenuhnya mendukung gradien CSS. IE 11 mendukung gradien linier dasar tetapi tidak mendukung gradien berbentuk kerucut.
Bagaimana cara menggunakan ini dalam proyek saya?
Cukup klik "Salin CSS" dan tempel properti latar belakang yang dihasilkan ke dalam file CSS Anda. Ini berfungsi pada elemen HTML apa pun yang mendukung properti latar belakang.
Bisakah saya membuat gradien CSS dengan beberapa warna?

Tambahkan perhentian warna, pilih posisinya dan pilih jenis gradien. Alat ini menghasilkan CSS dari pengaturan tersebut.

Bagaimana cara menggunakan pratinjau langsung gradien?

Sesuaikan warna, hentikan posisi dan arah saat melihat pratinjau. Salin CSS yang dihasilkan jika cocok dengan efek yang Anda inginkan.