Pembuat Gradien Radial CSS Buat gradien radial CSS dengan bentuk, posisi, dan warna yang dapat disesuaikan.

🎨

Pembuat Gradien Radial

Buat gradien radial CSS dengan bentuk, posisi, dan warna yang dapat disesuaikan.

Pilih Warna

Atur warna tengah dan warna tepi untuk gradien.

Konfigurasi Bentuk

Pilih bentuk lingkaran atau elips dan atur posisi tengah.

Salin Kode CSS

Salin kode CSS yang dihasilkan untuk proyek Anda.

Loading tool...

What Is Pembuat Gradien Radial?

Pembuat gradien radial membuat gradien CSS yang memancar keluar dari titik pusat dalam pola melingkar atau elips. Berbeda dengan gradien linier yang bertransisi sepanjang garis lurus, gradien radial menciptakan efek sorot seperti lampu sorot, bola bercahaya, dan efek kedalaman yang umum digunakan dalam desain web modern. Anda dapat mengontrol bentuk gradien (lingkaran atau elips), posisi pusat, dan warna. Pembuat ini menghasilkan kode CSS radial-gradient() yang kompatibel dengan semua browser modern. Gradien radial sangat efektif untuk menciptakan kedalaman visual, efek sorot pada bagian hero, latar belakang dekoratif, dan efek pencahayaan halus yang membuat desain datar terlihat lebih berdimensi.

Why Use Pembuat Gradien Radial?

Opsi bentuk lingkaran dan elips untuk efek yang berbeda
Posisi tengah yang dapat disesuaikan dengan slider X/Y
Pratinjau langsung diperbarui saat mengubah pengaturan
Keluaran CSS yang bersih dan siap produksi
Gratis digunakan tanpa mendaftar

Common Use Cases

Efek Sorot

Buat efek sorot yang menarik perhatian pada bagian hero atau gambar produk.

Efek Cahaya

Hasilkan latar belakang orb yang bersinar untuk kartu, modal, atau elemen dekoratif.

Kedalaman & Dimensi

Tambahkan kedalaman visual pada desain datar dengan transisi warna radial yang halus.

Efek Vignette

Buat vignette tepi gelap di atas gambar untuk tampilan sinematik.

Technical Guide

CSS radial-gradient() membuat gradien yang memancar dari titik. Sintaksnya adalah: radial-gradient(bentuk di posisi, warna1, warna2). Bentuk dapat berupa "lingkaran" (radius sama ke semua arah) atau "elips" (radius sesuai dengan rasio aspek elemen). Posisi menggunakan nilai persentase (50% 50% adalah pusat). Kata kunci ukuran seperti closest-side, farthest-corner mengontrol seberapa jauh gradien memanjang. Henti warna bekerja sama seperti pada gradien linier. Browser melakukan interpolasi warna dari pusat ke luar dalam lingkaran atau elips konsentris. Gradien radial dapat disusun - Anda dapat melapis beberapa gradien radial menggunakan pemisahan koma di background-image untuk efek kompleks seperti beberapa sumber cahaya.

Tips & Best Practices

1
Gunakan "lingkaran" untuk gradien bulat yang sempurna dan "elips" untuk bentuk yang sadar aspek-rasio
2
Posisikan tengah tidak simetris (misalnya, 30% 30%) untuk efek pencahayaan tidak simetris
3
Tumpuk beberapa gradien radial untuk efek multi-sumber cahaya yang kompleks
4
Gunakan transparan sebagai warna tepi untuk efek memudar yang halus di atas latar belakang
5
Gabungkan dengan mode-blend-latar-belakang untuk efek overlay kreatif

Related Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Pembuat Gradien Linier

Buat gradien linier CSS dengan warna kustom, sudut, dan pemberhentian warna.

🎨 Color Tools

Pembuat Gradien Konis

Buat gradien konis CSS untuk bagan pie, roda warna, dan efek sapuan.

🎨 Color Tools

Pencampur Warna

Campurkan dua warna bersama dengan rasio yang dapat disesuaikan dan lihat gradien penuh.

🎨 Color Tools

Pembuat Filter CSS

Terapkan efek filter CSS seperti blur, kecerahan, kontras, dan lainnya dengan kontrol visual.

🎨 CSS & Design

Frequently Asked Questions

Q Apa perbedaan antara lingkaran dan elips?

Lingkaran membuat gradien yang bulat sempurna terlepas dari dimensi elemen. Elips meregang untuk mencocokkan rasio aspek elemen, membuat bentuk oval pada elemen non-persegi.

Q Bisakah saya memposisikan tengah di mana saja?

Ya, menggunakan slider posisi X dan Y (0-100%). Defaultnya adalah 50% 50% (tengah). Memindahkannya membuat efek pencahayaan tidak simetris.

Q Apakah radial-gradien didukung di semua browser?

Ya, radial-gradient() didukung di semua browser modern tanpa awalan vendor.

About This Tool

Pembuat Gradien Radial 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.