Generator CSS Glassmorphism
Buat blok CSS "frosted glass" — latar belakang rgba() translucent, backdrop-filter blur (dengan prefiks -webkit-), border putih lembut dan bayangan halus — dari warna, opacity, blur dan radius.
Input
Digabungkan dengan warna latar belakang menjadi nilai rgba().
Digunakan untuk backdrop-filter dan kembar awalan -webkit- nya.
Opacity dari border putih 1px panel.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-glassmorphism-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"backgroundColor": "#ffffff",
"backgroundOpacity": "20",
"blurAmount": "10",
"borderRadius": "16",
"borderOpacity": "30"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-glassmorphism-generator` tool (CSS Glassmorphism Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-glassmorphism-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator CSS Glassmorphism — 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/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa yang dilakukan
Generator CSS Glassmorphism mengubah pemilih warna dan empat slider menjadi blok CSS "frosted glass" yang siap ditempel. Glassmorphism adalah tren desain UI populer — pertama dipopulerkan oleh panel frosted macOS dan kemudian oleh Fluent Design Windows serta dashboard/card UI tak terhitung — di mana panel translucent berada di atas latar belakang yang penuh warna atau sibuk, blur cukup untuk memberi isyarat apa yang ada di belakangnya sambil tetap terbaca. Tampilan ini berasal dari penggabungan beberapa properti CSS: latar belakang rgba() semi-transparan, blur backdrop-filter, border cahaya yang lembut, radius sudut rounded, dan bayangan drop yang halus untuk efek lift.
Properti yang dihasilkan
background: rgba(r, g, b, a);
backdrop-filter: blur(Npx);
-webkit-backdrop-filter: blur(Npx);
border: 1px solid rgba(255, 255, 255, a2);
border-radius: Npx;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);- background — warna pilihan Anda digabung dengan slider Background Opacity menjadi nilai
rgba(). Opacity yang lebih rendah memungkinkan lebih banyak apa pun yang berada di belakang panel untuk ditampilkan. - backdrop-filter / -webkit-backdrop-filter — blur aktual yang membuat efek terlihat seperti "glass." Kedua baris selalu dikeluarkan bersama; lihat catatan dukungan browser di bawah.
- border — border putih 1px tetap, diarsir oleh slider Border Opacity. Tepi cahaya yang pudar adalah yang membuat tampilan "pane of glass catching light"; border solid terlihat seperti kartu datar sebagai gantinya.
- border-radius — sudut rounded dari slider Border Radius. Panel glass hampir selalu rounded daripada sharp-cornered.
- box-shadow — bayangan tetap, halus yang mengangkat panel dari halaman tanpa bersaing dengan blur.
Catatan dukungan browser
backdrop-filter didukung dengan baik dalam Chrome, Edge dan Firefox modern, tetapi Safari secara historis memerlukan prefiks -webkit-backdrop-filter untuk merender blur sama sekali — itulah mengapa CSS yang dihasilkan selalu menyertakan kedua deklarasi. Jika Anda menghapus baris -webkit-, pengguna Safari mungkin melihat panel translucent datar tanpa blur sebagai gantinya dari efek frosted-glass. Juga perhatikan: backdrop-filter mengaburkan apa pun yang berada di belakang elemen, jadi efek ini tidak terlihat kecuali elemen berlapis di atas sesuatu dengan tekstur atau warna — latar belakang halaman putih polos tidak akan menunjukkannya.
Cara menggunakannya
- Pilih Background Color dan atur Background Opacity — bersama-sama ini menjadi pengisian rgba() panel translucent.
- Seret Blur (px) untuk mengontrol seberapa frosted tampilan glass; nilai yang lebih tinggi mengaburkan latar belakang di belakang panel lebih berat.
- Atur Border Radius untuk seberapa rounded sudut panel adalah.
- Sesuaikan Border Opacity untuk membuat edge putih yang pudar dari panel lebih atau kurang terlihat.
- Salin blok CSS yang dihasilkan dan terapkan ke elemen yang diposisikan yang berada di atas gambar, gradient atau elemen lain.
FAQ
Mengapa border selalu putih?
Border semi-transparan cahaya adalah konvensi universal di glassmorphism — itu meniru cara glass nyata menangkap cahaya di tepinya, terlepas dari warna panel sendiri. Jika Anda memerlukan border berwarna berbeda, tukar rgba(255, 255, 255, …) dalam output untuk warna Anda sendiri.
Mengapa blur tidak muncul pada elemen saya?
backdrop-filter hanya mengaburkan konten yang sudah dirender di belakang elemen — itu membutuhkan sesuatu dengan detail (gambar, gradient, atau UI lain) di bawahnya, dan elemen itu sendiri membutuhkan latar belakang transparan atau translucent sehingga konten itu menunjuk melalui. Latar belakang fully opaque mengalahkan efek sepenuhnya.
Bisakah saya menggunakan warna latar belakang gelap untuk tampilan "dark glass"?
Ya — pilih warna hex gelap (misalnya #000000) dan opacity rendah hingga sedang; border tetap putih untuk kontras terhadap latar belakang blur gelap, yang merupakan perawatan glassmorphism dark-mode standar.
Apakah alat ini menyimpan atau mengunggah apa pun? Tidak. Semua perhitungan berjalan secara lokal di browser Anda — warna dan nilai slider Anda tidak pernah meninggalkan perangkat Anda.