Pengembang / CSS

Generator Box Shadow CSS

Buat CSS box-shadow secara visual: atur offset, blur, spread, warna, opacity, inset, dan beberapa layer dengan preset serta live preview, lalu salin CSS-nya.

Generator Box Shadow CSS: Setiap layer menjadi satu bayangan dalam daftar box-shadow: offset horizontal dan vertikal, radius blur, spread, serta warna yang ditulis sebagai rgb() dengan opacity setelah tanda garis miring. Layer digambar dengan layer pertama di bagian paling atas. Radius sudut, warna, dan background box preview dapat diubah agar sesuai dengan desain Anda. Bayangan akan mengikuti sudut tersebut seperti pada halaman Anda. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools developer
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Generator bayangan kotakPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Layer 1
Kotak pratinjau

CSS

box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1),
  0px 2px 4px -2px rgb(0 0 0 / 0.1);

Nilainya adalah offset ke kanan, offset ke bawah, blur, sebaran, dan warna. Beberapa layer tipis terlihat lebih alami daripada satu bayangan tebal; layer berikutnya digambar di bawah layer sebelumnya.

Preset

Elevasi

Sistem desain menggunakan bayangan untuk menunjukkan seberapa jauh sesuatu tampak mengambang di atas halaman: kartu dalam keadaan diam memiliki bayangan kecil dan rapat, sedangkan menu atau dialog memiliki bayangan yang lebih besar dan lembut. Menggunakan beberapa tingkat yang tetap, alih-alih bayangan yang berbeda di setiap tempat, membuat antarmuka terasa konsisten.

Bayangan pada latar belakang gelap hampir tidak terlihat; dalam kondisi ini, warna permukaan yang lebih terang atau garis tepi tipis dapat memberikan efek yang sama. Padukan bayangan dengan gradien CSS untuk tombol dan kartu.

Bayangan dan performa

Blur yang besar membutuhkan biaya rendering lebih tinggi daripada blur kecil, terutama saat banyak elemen dengan bayangan digulir atau dianimasikan secara bersamaan. Untuk menganimasikan bayangan saat hover, lebih halus jika Anda memunculkan bayangan kedua yang lebih kuat pada pseudo-element dengan opacity, daripada mengubah box-shadow sendiri di setiap frame.

Cara menggunakannya

  1. Mulai dari preset atau sesuaikan offset, blur, spread, dan opacity layer pertama.
  2. Tambahkan layer untuk bayangan yang lebih lembut dan realistis, atau centang inset untuk bayangan di dalam box.
  3. Salin deklarasi box-shadow.

Privasi & batasan

Semuanya berjalan di browser Anda; bayangan terakhir hanya disimpan di browser ini.

Alat terkait

Gradasi CSSKonverter WarnaCSS MinifierClip path

Pertanyaan umum

Apa arti empat angka dalam box-shadow?

Keempatnya adalah offset horizontal (nilai positif menggeser bayangan ke kanan), offset vertikal (nilai positif menggesernya ke bawah), radius blur (nilai yang lebih besar menghasilkan bayangan lebih lembut dan tidak boleh negatif), serta spread (nilai positif membuat bayangan lebih besar dari box, sedangkan nilai negatif membuatnya lebih kecil). Warna ditulis setelahnya.

Bagaimana cara membuat bayangan terlihat natural?

Gunakan opacity rendah, geser bayangan ke bawah seolah-olah sumber cahaya berada di atas, lalu gabungkan dua layer atau lebih: satu layer kecil dan lebih tajam di dekat box, serta satu layer yang lebih besar dan lembut di bagian yang lebih jauh. Spread yang sedikit negatif mencegah blur besar terlihat di sisi-sisinya.

Apa fungsi inset?

Inset menggambar bayangan di dalam box, bukan di luarnya, sehingga box terlihat seperti tertekan ke dalam. Efek ini cocok untuk input field dan tombol yang ditekan.

Mengapa bayangan saya tidak terlihat pada gambar?

box-shadow digambar di sekeliling box elemen, bukan mengikuti bentuk gambar di dalamnya. Untuk membuat outline pada PNG transparan, gunakan CSS filter drop-shadow().

Alat gratis · berjalan di browser anda · tanpa perlu akun