Pembuat Bayangan CSS
Pembuat Bayangan CSS adalah box shadow generator gratis untuk membuat kode CSS bayangan (shadow) sebuah elemen melalui antarmuka GUI. Cukup atur offset (posisi horizontal & vertikal), blur, spread, warna, dan tingkat opasitas lewat slider, lalu kode box-shadow dan filter: drop-shadow() dibuat secara real-time.
Tipe output
Pengaturan lapisan bayangan
- 1
Preset
Kode CSS
.shadow {
box-shadow: 0px 10px 20px -4px rgba(15, 23, 42, 0.25);
}
Seluruh proses pembuatan bayangan berlangsung di dalam browser Anda, dan data yang dimasukkan tidak dikirim ke server eksternal.
Pratinjau
Elemen contoh
Alat Terkait
Color Picker
Ambil warna dari gambar dan dapatkan kode HEX, RGB, atau HSL. Perbesar dengan loupe untuk akurasi per piksel dan ekspor palet. Gratis, tanpa daftar.
- Desain & Warna
- Produktivitas
Ekstrak Palet Warna
Ekstrak warna dominan dari gambar/foto dan buat palet warna. Dapatkan HEX/RGB/HSL, porsi tiap warna, ekspor CSS/SCSS/Tailwind/JSON — semua di browser Anda.
- Ekstraksi
- Desain & Warna
Pembuat Palet Warna
Generator skema warna gratis yang membuat palet warna otomatis berdasarkan teori warna (komplementer, analog, triadik, dan lainnya) hanya dari satu warna dasar. Ekspor ke CSS variable, Tailwind, SCSS, dan JSON, lengkap dengan acuan kontras. Berjalan sepenuhnya di browser Anda.
- Generator
- Desain & Warna
Konverter Kode Warna
Konversi kode warna antara HEX, RGB, HSL, HSV, OKLCH, beserta alpha dan referensi CMYK. Salin format apa pun sekali klik. Berjalan sepenuhnya di browser Anda.
- Konverter
- Desain & Warna
Pemeriksa Kontras
Cek rasio kontras warna terhadap WCAG 2.1/2.2 AA dan AAA, dengan saran warna lulus, simulasi buta warna, dan APCA. Berjalan sepenuhnya di browser Anda.
- Pemeriksa
- Desain & Warna
- Aksesibilitas
Generator Gradient CSS
Generator gradient CSS gratis: buat gradien linear, radial, conic via GUI. Atur transparansi/alpha, ekspor CSS variable, Tailwind, SCSS, dan URL berbagi.
- Generator
- Pengembangan
- Desain & Warna
Apa itu alat Pembuat Bayangan CSS?
Pembuat Bayangan CSS adalah box shadow generator gratis untuk membuat kode CSS bayangan (shadow) sebuah elemen melalui antarmuka GUI. Cukup atur offset (posisi horizontal & vertikal), blur, spread, warna, dan tingkat opasitas lewat slider, lalu kode box-shadow dan filter: drop-shadow() dibuat secara real-time.
Anda dapat menumpuk beberapa layer bayangan, mulai dari bayangan halus yang alami hingga bayangan kaya dengan kesan tiga dimensi. Setiap layer dapat diubah menjadi bayangan dalam (inset) dan urutan tumpukannya dapat ditukar dengan menyeretnya. Selain HEX, warna juga mendukung tempelan format rgb() / hsl().
Lapisan bayangan dan Neumorphism merupakan dua mode independen yang dialihkan lewat toggle di bagian atas. Pada mode Lapisan bayangan, preset seperti bayangan halus, elevation ala Material, floating, bayangan tajam (hard), long shadow, dan glow dapat diterapkan dengan satu klik. Mode Neumorphism (neumorphic UI) membuat bayangan timbul-tenggelam secara real-time dengan mengatur warna dasar, jarak, dan intensitas. Anda bisa menyesuaikan sambil melihat hasil nyatanya dengan mengubah warna latar, warna elemen, dan bentuk (sudut membulat, lingkaran, persegi) pada pratinjau.
Bayangan yang dibuat dapat disalin satu klik dalam format CSS (box-shadow / filter), CSS variables, konfigurasi Tailwind, maupun variabel SCSS, lalu langsung ditempel ke kode Anda. Tombol "Salin URL" menghasilkan URL berbagi yang mereproduksi pengaturan saat ini, praktis untuk berbagi dengan tim atau menyimpan bookmark. Seluruh proses pembuatan bayangan berlangsung di dalam browser Anda dan data yang dimasukkan tidak dikirim ke server eksternal. Berjalan sepenuhnya di browser Anda.
Cara penggunaan
- Pilih tipe output (box-shadow / drop-shadow). box-shadow mendukung spread dan inset, sedangkan drop-shadow membuat bayangan yang mengikuti bentuk elemen.
- Tambahkan layer, lalu atur posisi horizontal & vertikal, blur, spread, warna, dan opasitas lewat slider. Beberapa layer dapat ditukar urutannya dengan menyeret, dan dengan inset bisa menjadi bayangan dalam.
- Pada mode Lapisan bayangan, terapkan preset (halus, Material, floating, tajam, long shadow, glow) dengan satu klik. Untuk bayangan timbul/cekung, beralihlah ke mode Neumorphism lalu atur slider warna dasar, jarak, dan intensitas secara real-time. Ubah warna latar, warna elemen, dan bentuk pada pratinjau untuk memeriksa hasilnya.
- Pada "Kode CSS", ganti tab antara CSS, CSS variables, Tailwind, dan SCSS, lalu gunakan "Salin Kode CSS" untuk mengambil kode dan menempelkannya ke kode Anda. Gunakan "Salin URL" untuk berbagi pengaturan.
Skenario penggunaan
- Desainer atau coder yang ingin memberi bayangan halus pada tombol, kartu, atau modal, dan langsung menyiapkan CSS box-shadow dengan salin-tempel.
- Frontend engineer yang ingin merancang bayangan estetis berkesan tiga dimensi atau bayangan dalam dengan memadukan beberapa layer dan inset.
- Pengguna yang ingin membuat bayangan timbul-tenggelam khas neumorphism (neumorphic UI) secara cepat dari warna dasar.
- Developer yang ingin menuangkan bayangan langsung ke kode sebagai konfigurasi boxShadow Tailwind, CSS variables, atau variabel SCSS.
- Pengguna yang ingin membagikan bayangan yang sudah ditentukan ke tim lewat URL berbagi, atau mereproduksi pengaturan yang sama di lain waktu.
Hal yang perlu diperhatikan
- Seluruh proses pembuatan bayangan berlangsung di dalam browser, dan data yang dimasukkan tidak dikirim ke pihak eksternal.
- drop-shadow (`filter: drop-shadow()`) tidak mendukung spread maupun inset. Keduanya hanya berlaku saat Anda memilih box-shadow.
- Jika beberapa drop-shadow ditumpuk, bayangan berikutnya ditambahkan di atas hasil bayangan sebelumnya (tampilannya berbeda dari box-shadow yang dipisah koma).
- URL berbagi memuat tipe output, setiap layer (posisi, blur, spread, warna, opasitas, inset), dan pengaturan pratinjau. Membuka URL akan mereproduksi bayangan dengan pengaturan yang sama.