ID

CSS box shadow generator

Pilih preset atau atur offset, blur, spread, warna dan opasitas dengan slider. Tumpuk beberapa bayangan dan ubah mana saja menjadi bayangan dalam (inset). Pratinjau langsung berubah dan CSS jadinya bisa disalin dengan satu klik. Anda juga bisa menempelkan CSS sendiri di bawah dan melanjutkan pengeditan.

Atur bayangan

Preset

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Satu bayangan per baris, dipisahkan koma – mis. 0 4px 12px rgba(0, 0, 0, 0.12)
Input Anda hanya disimpan di browser ini.

Hasil

Deklarasi CSS
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Lapisan bayangan (yang pertama paling atas)
No.Offset X (px)Offset Y (px)Blur (px)Spread (px)WarnaJenis
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)luar
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)luar
Seberapa jauh bayangan keluar dari kotak (perkiraan)
atas 10 px · kanan 20 px · bawah 30 px · kiri 20 px

Cara menghitung

Cara kerja box-shadow

Menurut spesifikasi W3C (CSS Backgrounds and Borders Level 3), sebuah bayangan terdiri dari dua sampai empat panjang, warna opsional dan kata kunci opsional inset:

Cara membuat box shadow CSS

  1. Pilih preset atau atur offset, blur, spread, warna dan opasitas dengan slider.
  2. Tambahkan bayangan lain bila perlu dan tandai mana yang menjadi bayangan dalam (inset).
  3. Salin deklarasi CSS – atau tempel kode box-shadow Anda sendiri dan lanjutkan pengeditan.
NilaiArti
Panjang ke-1Geser horizontal ke kanan (negatif: ke kiri)
Panjang ke-2Geser vertikal ke bawah (negatif: ke atas)
Panjang ke-3Radius blur, tidak pernah negatif; 0 jika dihilangkan
Panjang ke-4Spread: memperbesar bayangan, nilai negatif memperkecilnya
Warnajika dihilangkan, warna teks dipakai (currentColor)
insetmenggambar bayangan di dalam kotak, bukan di luar

Pisahkan beberapa bayangan dengan koma. Bayangan pertama digambar paling atas, yang lain di belakangnya. Bayangan tidak memengaruhi tata letak dan tidak membuat scrollbar – tetapi elemen induk dengan overflow: hidden akan memotongnya.

Seberapa jauh blur menyebar?

Spesifikasi mensyaratkan blur yang mendekati Gaussian blur dengan simpangan baku setengah radius blur. Transisi yang dihasilkan kira-kira dua kali lebar nilai blur dan berpusat di tepi bayangan – jadi menyebar ke luar kira-kira satu radius blur.

Contoh 0 10px 25px -5px: tepinya berada 25 − 5 = 20 px di luar kotak, bergeser 10 px ke bawah. Karena itu bayangan keluar sekitar 20 − 10 = 10 px di atas, 20 px di tiap sisi dan 20 + 10 = 30 px di bawah. Generator menampilkan nilai ini di “Seberapa jauh bayangan keluar” – berguna sebagai padding agar tidak ada yang terpotong.

Penggunaan umum

Pertanyaan umum

Apa beda blur dan spread?

Blur (nilai ke-3) melembutkan tepi tanpa mengubah luas dasar bayangan. Spread (nilai ke-4) memperbesar atau memperkecil luas bayangan itu sendiri sebelum diblur. Blur 0 dengan spread positif menghasilkan garis tepi yang tegas.

Bagaimana menumpuk beberapa bayangan?

Pisahkan dengan koma, mis. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). Bayangan pertama digambar paling atas. Di generator, tambahkan lapisan dengan “+ Bayangan”.

Mengapa bayangan saya terpotong?

Bayangan tidak dihitung dalam ukuran elemen. Jika elemen induk memakai overflow: hidden atau overflow: auto, bagian yang menonjol akan dipotong. Beri elemen induk padding sebesar yang ditampilkan generator pada jangkauan bayangan.

Apakah box-shadow berfungsi di semua browser?

Ya. box-shadow, termasuk beberapa bayangan, inset dan warna rgba(), didukung tanpa prefiks oleh semua browser saat ini. Generator menulis warna transparan sebagai rgba(), yang juga dipahami browser lama.

Bagaimana membuat bayangan hanya di bawah?

Gunakan spread negatif yang menetralkan blur, mis. box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3). Bayangan lalu tidak keluar di atas maupun di sisi kotak, hanya 8 px di bawahnya.

Sumber dan dasar hukum

Diperbarui:

Alat terkait