Instal ZYBERMART

Buka semua alat dari layar utama atau dock, di jendelanya sendiri. Alat yang pernah Anda gunakan juga bisa dipakai offline.

Pembuat Box Shadow

Buat box shadow CSS yang lembut, berlapis, atau inset dengan pratinjau langsung, lalu salin CSS-nya.

CSS


        

box-shadow syntax

box-shadow: [inset] x-offset y-offset blur spread color;

Separate multiple shadows with commas. The first shadow is drawn on top.

Popular shadow styles

  • Subtle card: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08)
  • Raised: 0 10px 25px -5px rgba(0,0,0,.15)
  • Glow: 0 0 20px 4px rgba(255,90,31,.45)

Frequently asked questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius and color, plus the optional keyword inset. For example, 0 4px 12px 0 rgba(0,0,0,0.15) is a soft shadow 4px below the element.

How do I make shadows look realistic?

Layer two or three shadows: a small, sharper one close to the element and a larger, softer one further away, both with low opacity. Real light rarely produces one hard, dark shadow.

What does inset do?

inset draws the shadow inside the element instead of outside it, making it look pressed in. It's useful for input fields and pressed buttons.

Does box-shadow affect performance?

Shadows are cheap for normal use. Animating large blur radii on many elements can slow scrolling on low-end phones; animate opacity or transform instead where possible.

Masuk ke ZYBERMART

Simpan CV, invoice, flashcard, catatan, dan alat tersimpan Anda di semua perangkat. Gratis, dan semua alat tetap berfungsi sama tanpa akun.

atau

Tanpa kata sandi. Dengan masuk, Anda menyetujui ketentuan kami; lihat cara kami mengelola data Anda di kebijakan privasi.

Akun Anda

Saat keluar, salinan pekerjaan Anda tetap tersimpan di browser ini. Di komputer bersama, hapus data browser setelahnya.

Apa yang ingin Anda buat?

Desain

Media sosial

Dokumen

Belajar

Edit

Lihat semua 282 alat