Lewati ke konten utama
iotools.cloudiotools.cloud

Pembuat Latar Belakang CSS Aurora / Gradient Blob

Buat latar belakang CSS 'aurora' yang lembut dan berkesan dari 2-5 blob gradien radial berwarna, dengan blur, posisi, dan ukuran yang dapat disesuaikan, ditambah animasi @keyframes drifting opsional. Salin CSS atau lihat pratinjau secara langsung.

Input

Latar Belakang

Warna solid yang ditampilkan di belakang blob.

Kelembututan blob — nilai yang lebih tinggi memadukan blob lebih banyak.

Blob

Blob 1

Blob 2

Blob 3

Animasi

Output

Latar belakang aurora Anda akan ditampilkan di sini.

CSS

Tambahkan ini ke stylesheet Anda, kemudian terapkan class="aurora-bg" ke container.

Cuplikan HTML (pratinjau statis)

Div dengan gaya inline yang cocok dengan pratinjau di atas — tempel di mana saja. Tidak termasuk animasi drift.

Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-aurora-blob-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "baseColor": "#0f0f1e",
    "blur": "60",
    "blobCount": "2",
    "blob1Color": "#ff4d8a",
    "blob1X": "20",
    "blob1Y": "30",
    "blob1Size": "60",
    "blob2Color": "#5a3dff",
    "blob2X": "75",
    "blob2Y": "25",
    "blob2Size": "55",
    "animate": "",
    "animationDuration": "20"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-aurora-blob-generator` tool (Aurora / Gradient Blob CSS Background Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-aurora-blob-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Latar Belakang CSS Aurora / Gradient Blob — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa itu latar belakang "aurora"?

Latar belakang aurora (juga disebut "gradient blob" atau "blob gradient" background) adalah aliran warna yang lembut, bercahaya, dan tidak fokus yang dipopulerkan oleh banyak halaman pemasaran SaaS dan bagian hero — segelintir bentuk besar berwarna yang kabur bergerak perlahan di belakang konten. Tidak seperti linear-gradient datar, ini terlihat seperti kedalaman dan cahaya daripada fade datar tunggal.

Alat ini membangun efek dengan CSS murni: 2 hingga 5 lapisan radial-gradient() berwarna ("blobs"), masing-masing diposisikan dan diukur secara independen, ditumpuk sebagai lapisan background-image yang dipisahkan koma di belakang konten Anda dan dilembut dengan filter: blur() tunggal. Aktifkan animasi opsional dan blob akan bergerak perlahan melalui aturan @keyframes yang dihasilkan — tidak ada JavaScript, canvas, atau gambar yang diperlukan saat runtime.

Cara menggunakan alat ini

  1. Pilih Warna Dasar — warna solid yang ditampilkan di belakang blob — dan jumlah Blur. Nilai blur yang lebih tinggi melebur blob bersama menjadi cahaya yang lebih halus; nilai yang lebih rendah membuat setiap blob lebih terpisah.
  2. Pilih Jumlah Blob (2-5). Setiap blob mendapatkan Warna sendiri, Posisi X/Y % (di mana pusatnya berada dalam container) dan Ukuran % (seberapa jauh penyebarannya sebelum memudar menjadi transparan).
  3. Secara opsional aktifkan Animasikan untuk menambahkan animasi @keyframes drifting yang lambat — setiap blob meluncur ke posisi terdekat dan kembali, dengan durasi yang Anda kontrol, sehingga latar belakang tidak pernah terlihat statis.
  4. Salin CSS dan terapkan class="aurora-bg" ke container yang diposisikan (atau ubah nama kelas agar sesuai dengan stylesheet Anda sendiri) — blob membuat render pada pseudo-elemen ::before di belakang konten Anda, sehingga teks dan anak-anak lainnya tetap sangat tajam bahkan dengan blur yang berat.
  5. Pratinjau menunjukkan dengan tepat apa yang dihasilkan CSS; Cuplikan HTML di bawahnya adalah markup yang sama dengan <div> yang gaya inline mandiri yang dapat Anda tempel di mana saja stylesheet tidak nyaman. Perhatikan bahwa cuplikan selalu menunjukkan frame istirahat (non-animasi) — atribut style inline tidak dapat membawa aturan @keyframes, jadi drift hanya muncul setelah blok CSS (dengan @keyframes aurora-drift) benar-benar ada dalam stylesheet.

Mengapa blur bukan lebih banyak gradient stops?

filter: blur() tunggal yang diterapkan ke seluruh latar belakang berlapis adalah yang memberikan aurora tepi bercahaya yang lembut — itu murah untuk dihitung, bekerja identik di semua blob terlepas dari posisi atau ukuran, dan merupakan teknik yang sama di balik tampilan "frosted glow" di situs seperti Stripe atau halaman pemasaran Linear. Melapisinya pada pseudo-elemen ::before (daripada mengaburkan container itu sendiri) menjaga blur agar tidak berdarah ke konten aktual Anda.

FAQ

Apakah ini akan bekerja di setiap browser? Ya. Latar belakang radial-gradient() berlapis, animasi filter: blur() dan CSS @keyframes didukung di semua browser utama selama bertahun-tahun — tidak ada vendor prefix yang diperlukan.

Mengapa pratinjau langsung terlihat statis bahkan dengan Animasi diaktifkan? Pratinjau membuat markup gaya inline yang sama dengan Cuplikan HTML di bawahnya, dan atribut style inline tidak memiliki cara untuk mereferensikan aturan @keyframes. Animasi itu nyata dan termasuk dalam blok CSS yang dihasilkan — Anda akan melihatnya bergerak setelah menempel CSS ke dalam stylesheet aktual.

Bisakah saya menggunakan lebih dari 5 blob? Tidak dengan alat ini — 5 menjaga CSS yang dihasilkan tetap singkat dan mudah diedit secara manual sambil tetap memberikan tampilan yang kaya dan berlapis. Anda selalu dapat menduplikasi lapisan radial-gradient() sendiri dalam keluaran jika Anda menginginkan lebih banyak.

Mengapa tidak ada kontrol opacity per-blob? Setiap blob sudah memudar dari warna penuh menjadi sepenuhnya transparan sesuai desain (itulah yang dikontrol "Ukuran %"), dan Blur global semakin melembut setiap blob secara sama — penggeser opacity ekstra tidak akan mengubah hasil yang terlihat secara bermakna, sehingga ditinggalkan untuk menjaga kontrol tetap fokus.

Privasi

Semuanya terjadi di browser Anda. Warna, posisi, dan pengaturan pilihan Anda tidak pernah dikirim ke server — CSS, HTML, dan pratinjau dihasilkan dan diperbarui secara lokal saat Anda menyesuaikan kontrol.

cssgradientaurorablobbackgroundgeneratoranimationweb designmesh gradient

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan