Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Penghasil Latar Belakang CSS Aurora / Blob Gradien

WarnaPengembangGambar

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Basis

Warna Dasar

Warna latar belakang yang ditampilkan di belakang kluster aurora

Blur Global (px): 80 Menerapkan filter:blur() ke semua orb untuk efek aurora yang lembut

Orb Aurora

Tip: Tarik langsung setiap orb ke tampilan langsung untuk menempatkan ulang posisinya.

Orb 1

Warna

Posisi X %: 20

Posisi Y %: 30

Ukuran %: 60

Kelembapan %: 80

Orb 2

Aktifkan Orb 2

Warna

Posisi X %: 75

Posisi Y %: 25

Ukuran %: 55

Kelembapan %: 80

Orb 3

Aktifkan Orb 3

Warna

Posisi X %: 65

Posisi Y %: 75

Ukuran %: 50

Kelembapan %: 75

Orb 4

Aktifkan Orb 4

Warna

Posisi X %: 30

Posisi Y %: 80

Ukuran %: 45

Kelembapan %: 70

Format Keluaran

CSS (radial-gradient + filter blur)

SVG (dengan feGaussianBlur)

KELUARAN

Sisi klien

Tampilan Langsung (tarik tangan berangka untuk menempatkan ulang orb)

Kode yang Dibangun

IKLAN · HAPUS?

Memandu

Generator Latar Belakang CSS Aurora / Gradasi Blob

Penghasil Latar Belakang CSS Aurora / Blob Gradien

Buat latar belakang aurora yang lembut dan bercahaya dengan hingga empat orb berwarna yang dapat ditarik, diubah warna, dan diubah ukuran pada kanvas langsung. Alat ini menghasilkan kode CSS siap digunakan menggunakan radial-gradient dan filter: blur(), atau SVG portabel menggunakan feGaussianBlur — sehingga Anda dapat menempelkan hasilnya ke situs web, halaman pendaftaran, atau bagian utama dalam beberapa detik.

Cara Penggunaan

Pilih sebuah warna dasar untuk latar belakang di belakang orb.
Sesuaikan blur global slider untuk mengontrol seberapa lembut cahaya aurora muncul.
Untuk setiap orb yang diaktifkan, atur color, posisi, ukurandan kelembapan — atau cukup tarik tangan berangka pada tampilan langsung.
Switch output ke CSS atau SVG tergantung pada tempat Anda ingin menempelkannya.
Klik Acak jika Anda ingin titik awal cepat, lalu sesuaikan dari sana.
Salin kode dengan tombol salin — tempelkan ke dalam gaya atau komponen Anda.

Fitur

Editor kanvas multi-orb – Hingga empat orb independen, masing-masing dengan warna, posisi, ukuran, dan kelembapan sendiri.
Drag-to-reposition – Ambil tangan berangka pada tampilan langsung dan pindahkan ke mana saja; slider tetap sinkron.
Kontrol blur global – Satu slider menyesuaikan kelembutan secara keseluruhan dari efek aurora untuk semua orb secara bersamaan.
Output CSS atau SVG – Dapatkan kode bersih radial-gradient stack dengan filter: blur(), atau SVG yang mandiri yang menggunakan feGaussianBlur.
Tombol Acak – Menghasilkan warna dan posisi baru untuk orb yang diaktifkan untuk memicu ide.
Salin dan unduh – Salin atau unduh kode yang dihasilkan dalam satu klik, siap digunakan di proyek Anda.

 Tanya Jawab Umum

Apa itu latar belakang gradasi aurora?

Latar belakang gradasi aurora adalah gaya latar belakang yang meniru cahaya lembut dan kabur dari aurora borealis. Biasanya dibangun dengan menumpuk beberapa spot warna besar yang sangat kabur secara radial di atas dasar gelap, sehingga warna-warna tersebut berubah secara perlahan tanpa bertemu pada garis tajam. Gaya ini menjadi populer di halaman pendaftaran SaaS modern karena menambah kedalaman dan suasana yang ramah gerakan tanpa beban visual seperti foto.
Bagaimana CSS radial-gradient dikombinasikan dengan filter:blur menciptakan efek kluster?

Radial-gradient menggambar spot warna berbentuk lingkaran yang berubah ke titik akhir yang dipilih, sehingga menumpuk beberapa dari mereka menghasilkan disk warna dengan tepi tajam. Menerapkan filter:blur pada lapisan ini menghaluskan disk-disk tersebut dengan mengambil rata-rata setiap piksel dengan tetangganya, yang mengubah lingkaran tajam menjadi kluster bercahaya yang tipis. Meningkatkan jari blur menyebar rata-rata lebih jauh, yang membuat kluster terlihat lebih besar dan lebih tersebar meskipun lapisan gradasi di bawahnya tidak berubah.
Apa perbedaan antara menggunakan CSS filter:blur dan SVG feGaussianBlur?

Keduanya menerapkan blur gaya Gaussian, tetapi mereka berada di jalur rendering yang berbeda. CSS filter:blur cepat dan diakcelerasi oleh perangkat keras di kebanyakan browser, tetapi dapat memotong di tepi elemen dan dapat berinteraksi tidak nyaman dengan transformasi, konteks tumpukan, atau filter latar belakang. SVG feGaussianBlur merupakan bagian dari grafik filter SVG, sehingga komposisinya dapat diprediksi di dalam tampilan viewBox dan mudah diintegrasikan sebagai aset mandiri, yang berguna ketika Anda ingin latar belakang bergerak bersama markup atau diekspor sebagai gambar.
Mengapa latar belakang kabur dianggap sebagai kekhawatiran performa?

Filter kabur berat memaksa browser untuk menggambar ulang area besar setiap frame saat berubah, dan jari blur besar meningkatkan ukuran kernel yang harus dikonvolusi oleh GPU. Pada perangkat rendah kinerja, animasi elemen yang sangat kabur atau menumpuk banyak lapisan kabur di atas konten yang sedang dipindahkan dapat menurunkan frame rate dan menguras baterai. Mitigasi umum adalah menjaga lapisan kabur tetap statis, memperolehnya sebagai gambar sebelumnya jika mungkin, atau memindahkannya ke lapisan komposit terpisah agar bagian lain dari halaman tidak mengalami re-kabur setiap kali halaman dipindahkan.