Box Shadow Generator

Buat efek bayangan CSS (box-shadow) yang cantik secara visual.

Configuration

10px
10px
5px
0px
50%

Preview

Box

CSS Code

box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);

👋 Sekilas Info

Bikin efek bayangan di CSS itu gampang-gampang susah. Kalau ngetik manual sering lupa urutannya. Mending pake visual editor ini, geser slider sampai pas, terus copy kodenya.

Cara Pakai

1

Atur posisi bayangan (Horizontal & Vertical Offset).

2

Tentukan tingkat keburaman (Blur) dan ukuran (Spread).

3

Pilih warna dan transparansi.

4

Copy kode CSS yang dihasilkan.

Fitur Unggulan

Visual Editor

Lihat langsung hasil bayangan saat diedit.

Lengkap

Support Offset, Blur, Spread, Color, Opacity, dan Inset.

Cross-Browser

Menyertakan prefix -webkit dan -moz untuk kompatibilitas maksimal.

Tips & Trik

  • •Gunakan bayangan tipis dengan blur tinggi untuk efek 'floating' yang modern.
  • •Hindari warna hitam pekat (#000) untuk bayangan, kurangi opacity agar terlihat natural.

FAQ

Apa bedanya Inset?

Inset membuat bayangan ada di DALAM kotak, bukan di luar.

Mungkin Kamu Juga Butuh Ini

100% Aman & Privat

File Anda diproses sepenuhnya secara lokal di browser perangkat Anda. Kami tidak pernah mengunggah atau menyimpan data Anda di server.

Super Cepat

Menggunakan teknologi terbaru untuk memastikan pemrosesan data secepat kilat tanpa lag.

Gratis Selamanya

Nikmati semua fitur tanpa biaya tersembunyi. Alat ini sepenuhnya gratis untuk siapa saja.