Lompat ke konten
Aback Tools Logo

Koleksi Box Shadow

Telusuri 40+ preset box-shadow CSS siap pakai dengan pratinjau langsung pada elemen kartu nyata. Pilih dari kategori Elevasi, Soft UI, Berwarna, Cahaya, Inset, Berlapis, Tajam, dan Minimal. Klik preset mana pun untuk menyalin nilai CSS seketika - tanpa pendaftaran.

Box Shadow Collection

Browse 44 ready-made CSS box-shadow presets across 8 categories. Click any card or CSS value to copy it instantly. Filter by category or search by name, style, or CSS value.

Showing all 44 box-shadow presetsClick any card or CSS value to copy

Elevation XS

Elevation

Subtle 1dp lift - ideal for chips, tags, and small interactive elements.

Elevation SM

Elevation

Light 2dp card shadow - the standard for content cards and panels.

Elevation MD

Elevation

Medium 4dp shadow - great for dropdowns, popovers, and floating panels.

Elevation LG

Elevation

Prominent 8dp shadow - use for modals, dialogs, and sticky headers.

Elevation XL

Elevation

Deep 16dp shadow - for full-screen overlays and high-priority surfaces.

Elevation 2XL

Elevation

Maximum depth shadow - for hero cards and dramatic focal elements.

Soft Flat

Soft UI

Flat neumorphic surface - no depth, just a subtle pressed appearance.

Soft Raised

Soft UI

Classic neumorphic raised button - light from top-left, shadow bottom-right.

Soft Pressed

Soft UI

Neumorphic pressed/active state - inset shadows simulate a pushed-in button.

Soft Concave

Soft UI

Concave neumorphic well - for input fields and recessed containers.

Dark Soft Raised

Soft UI

Dark-mode neumorphic raised card - works on dark gray backgrounds.

Dark Soft Pressed

Soft UI

Dark-mode neumorphic pressed state - inset shadows on dark surfaces.

Indigo Glow

Colored

Indigo-tinted shadow - pairs with primary brand colors and CTA buttons.

Blue Lift

Colored

Sky-blue shadow - great for info cards, links, and interactive tiles.

Green Success

Colored

Green-tinted shadow - use for success states, badges, and confirmation cards.

Red Alert

Colored

Red-tinted shadow - for error states, destructive actions, and alert cards.

Amber Warning

Colored

Amber-tinted shadow - for warning states, caution badges, and highlight cards.

Purple Premium

Colored

Purple shadow - for premium features, pro badges, and upgrade prompts.

Pink Accent

Colored

Pink shadow - for creative tools, social features, and playful UI elements.

Inset Subtle

Inset

Subtle inset shadow - for input fields, text areas, and recessed containers.

Inset Medium

Inset

Medium inset shadow - for active/focused input states and pressed buttons.

Inset Deep

Inset

Deep inset shadow - for wells, troughs, and strongly recessed surfaces.

Inset Top Border

Inset

Inset top shadow that mimics a colored top border - for active tab indicators.

Inset Bottom Border

Inset

Inset bottom shadow - for underline-style active states and focused inputs.

Layered Soft

Layered

Three-layer soft shadow - creates a natural, photorealistic depth effect.

Layered Deep

Layered

Five-layer deep shadow - for premium cards and high-impact hero elements.

Layered Colored

Layered

Multi-layer indigo shadow - for branded cards and interactive components.

Layered Offset

Layered

Offset layered shadow - creates a stacked paper or card-deck visual effect.

White Glow

Glow

White outer glow - for dark-mode cards and highlighted elements on dark backgrounds.

Indigo Glow

Glow

Indigo neon glow - for dark-mode CTAs, active states, and focus rings.

Cyan Glow

Glow

Cyan neon glow - for tech-themed dark UIs, terminal-style elements.

Green Glow

Glow

Green neon glow - for success indicators and active status badges on dark backgrounds.

Pink Glow

Glow

Pink neon glow - for creative dark-mode UIs and vibrant accent elements.

Amber Glow

Glow

Warm amber glow - for notification badges, warning indicators, and warm dark UIs.

Sharp SM

Sharp

Small sharp shadow - for retro/pixel-art UI elements and brutalist designs.

Sharp MD

Sharp

Medium sharp shadow - for bold cards and strong visual hierarchy.

Sharp LG

Sharp

Large sharp shadow - for brutalist hero sections and high-contrast layouts.

Sharp Colored

Sharp

Colored sharp shadow - for playful, retro-styled interactive cards.

Sharp Double

Sharp

Double sharp shadow - creates a stacked offset effect for comic-book style UI.

Border Shadow

Minimal

Shadow that mimics a 1px border - use instead of border for cleaner rendering.

Focus Ring

Minimal

Accessible focus ring - use for keyboard-focused interactive elements.

Bottom Only

Minimal

Bottom-only shadow - for navigation bars, sticky headers, and tab panels.

Top Only

Minimal

Top-only shadow - for sticky footers, bottom sheets, and floating toolbars.

No Shadow

Minimal

Explicit shadow removal - use to override inherited box-shadow values.

Mengapa Menggunakan Koleksi Box Shadow Kami?

  • Salin CSS Box Shadow Instan: koleksi box shadow kami memungkinkan Anda menyalin nilai CSS preset apa pun dengan satu klik. Setiap kartu menampilkan pratinjau langsung bayangan yang diterapkan pada elemen nyata - tanpa menebak, tanpa penyetelan manual, cukup salin dan tempel ke proyek Anda.
  • Koleksi Box Shadow Online yang Aman: koleksi box shadow online berjalan sepenuhnya di browser Anda. Tidak ada data yang dikirim ke server mana pun - alur kerja desain Anda tetap sepenuhnya privat dan berfungsi offline setelah halaman dimuat.
  • 40+ Preset di 8 Kategori: telusuri bayangan Elevasi, Soft UI (neumorfisme), Berwarna, Inset, Berlapis, Cahaya, Tajam, dan Minimal. Setiap kategori mencakup pola desain yang berbeda sehingga Anda dapat menemukan box shadow yang tepat untuk konteks antarmuka apa pun.
  • 100% Gratis - Tanpa Pendaftaran: gunakan koleksi box shadow gratis tanpa akun, tanpa tingkatan premium, dan tanpa batas penggunaan. Cari, filter, pratinjau, dan salin bayangan sebanyak yang Anda butuhkan untuk proyek apa pun - sepenuhnya gratis selamanya.

Kasus Penggunaan Umum Koleksi Box Shadow

  • Gaya Kartu & Panel UI: terapkan bayangan elevasi yang tepat pada kartu, panel, dan kontainer konten. Koleksi box shadow menyediakan skala elevasi lengkap dari XS hingga 2XL sehingga Anda dapat menyesuaikan dengan Material Design, Tailwind, atau token sistem desain Anda sendiri.
  • Kedalaman Tombol & CTA: tambahkan kedalaman pada tombol utama dan elemen call-to-action memakai bayangan berwarna atau berlapis. Koleksi box shadow mencakup bayangan berwarna indigo, biru, hijau, dan ungu yang cocok langsung dengan palet merek umum.
  • Efek Cahaya Mode Gelap: gunakan preset kategori Cahaya untuk sorotan bergaya neon pada latar gelap. Koleksi box shadow mencakup bayangan cahaya putih, indigo, cyan, hijau, merah muda, dan amber yang dioptimalkan untuk permukaan antarmuka mode gelap.
  • Soft UI & Neumorfisme: bangun antarmuka neumorfik dengan preset Soft UI - varian terangkat, tertekan, cekung, dan datar untuk latar terang maupun gelap. Koleksi box shadow mencakup nilai siap pakai untuk pola neumorfik paling umum.
  • Gaya Input & Formulir: gunakan bayangan Inset dan Minimal untuk kolom masukan, area teks, dan kontainer formulir. Koleksi box shadow mencakup bayangan inset halus, cincin fokus, dan bayangan pengganti batas untuk desain formulir yang aksesibel dan rapi.
  • Dokumentasi Sistem Desain: salin nilai bayangan langsung ke berkas token sistem desain Anda, konfigurasi Tailwind, atau properti kustom CSS. Koleksi box shadow menyediakan preset bernama dan terkategori yang cocok dengan konvensi penamaan token desain.

Apa Itu CSS Box Shadow?

Properti CSS box-shadow menambahkan satu atau beberapa efek bayangan pada kotak elemen. Setiap bayangan ditentukan oleh offset (X dan Y), radius blur, radius sebar opsional, warna, dan kata kunci inset opsional. Beberapa bayangan dapat dilapisi dengan memisahkannya memakai koma, menciptakan efek kedalaman mulai dari elevasi halus hingga cahaya dramatis. Koleksi box shadow kami menyediakan 40+ preset siap pakai sehingga Anda dapat menemukan nilai box-shadow yang tepat tanpa menulisnya dari nol.

Cara Kerja Koleksi Box Shadow Kami

  1. Telusuri atau Cari: gunakan pil filter kategori untuk menjelajahi preset Elevasi, Soft UI, Berwarna, Inset, Berlapis, Cahaya, Tajam, dan Minimal - atau ketik di kotak pencarian untuk menemukan bayangan berdasarkan nama, kategori, atau nilai CSS.
  2. Pratinjau Langsung: setiap kartu di koleksi box shadow menampilkan elemen pratinjau langsung dengan bayangan persis yang diterapkan, sehingga Anda melihat tampilannya sebelum menyalin.
  3. Salin dan Gunakan: klik tombol salin pada kartu mana pun untuk menyalin deklarasi lengkap box-shadow: …;, atau klik langsung pada nilai CSS untuk menyalin nilainya saja. Tempelkan ke CSS, konfigurasi Tailwind, atau berkas token desain Anda.

Apa yang Dicakup Koleksi Box Shadow

  • Skala Elevasi: bayangan dari XS hingga 2XL mengikuti konvensi elevasi Material Design dan Tailwind untuk hierarki kedalaman yang konsisten.
  • Soft UI / Neumorfisme: bayangan neumorfik terangkat, tertekan, cekung, dan datar untuk latar terang maupun gelap.
  • Berwarna & Cahaya: bayangan berwarna merek dan efek cahaya neon untuk antarmuka mode gelap, CTA, dan indikator status.
  • Inset, Tajam & Minimal: bayangan inset untuk kolom formulir, bayangan tajam untuk desain brutalist, dan bayangan minimal untuk batas dan cincin fokus.

Dukungan Browser & Privasi

Properti box-shadow didukung di semua browser modern dan telah didukung sejak IE9. Bayangan berlapis (dipisah koma) sama-sama didukung dengan baik. Semua penelusuran, pencarian, dan penyalinan koleksi box shadow berjalan lokal di browser Anda - tidak ada data yang pernah dikirim ke server mana pun.

Pertanyaan yang Sering Diajukan

Koleksi box-shadow CSS adalah pustaka terkurasi berisi nilai CSS box-shadow siap pakai dengan pratinjau langsung. Telusuri preset per kategori, lihat bagaimana setiap bayangan tampak pada elemen nyata, dan salin nilai CSS dengan satu klik.

Koleksi box shadow mencakup 8 kategori: Elevasi, Soft UI (neumorfisme), Berwarna, Inset, Berlapis, Cahaya, Tajam, dan Minimal - total 40+ preset.

Klik ikon salin pada kartu mana pun untuk menyalin deklarasi lengkap box-shadow: …;, atau klik teks nilai CSS untuk menyalin nilainya saja.

Ya. Koleksi box shadow online berjalan sepenuhnya di browser Anda. Tidak ada data yang pernah dikirim ke server mana pun.

Bisa. Salin nilai apa pun dan tambahkan ke tailwind.config.js Anda di bawah theme.extend.boxShadow. Nilainya juga kompatibel dengan properti kustom CSS dan CSS-in-JS.

Bayangan neumorfik memakai dua bayangan - satu terang dan satu gelap - untuk mensimulasikan permukaan yang menonjol dari latar atau tertekan ke dalamnya. Koleksi ini mencakup varian terangkat, tertekan, cekung, dan datar.

Ya. Koleksi box shadow 100% gratis tanpa pendaftaran, tanpa tingkatan premium, dan tanpa batas penggunaan.