Penjana Box Shadow

Seret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.

Lapisan bayang
Lapisan 1
CSS
Laraskan gelongsor untuk membentuk bayang anda.

Setiap bayang dipaparkan dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo.

Soalan Lazim

Apakah yang sebenarnya dikawal oleh ofset, kabur dan sebaran?

Ofset menggerakkan bayang ke kiri/kanan dan atas/bawah, kabur melembutkan tepinya, dan sebaran membesarkan atau mengecilkan bayang sebelum dikaburkan. Sebaran negatif menarik bayang ke dalam, berguna untuk bayang yang rapat dan ketat.

Apakah fungsi pilihan inset?

Bayang biasa jatuh di luar elemen, seperti cahaya di belakang kad yang timbul. Inset membalikkannya ke dalam, jadi elemen kelihatan tertekan ke dalam — berguna untuk input tenggelam atau butang yang ditekan.

Mengapakah perlu menyusun lebih daripada satu lapisan bayang?

Satu bayang kelihatan rata melebihi saiz tertentu. Ketinggian sebenar biasanya menggabungkan bayang gelap yang rapat dengan bayang yang lebih lembut dan lebar — tambah lapisan kedua dan selaraskan setiap satu secara berasingan untuk mendapatkan kesan tersebut.

Penjana CSS Cubic BezierSeret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().Penjana KecerunanBina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.Penjana Border RadiusBulatkan setiap bucu dengan gelongsor, bentuk gumpalan organik dengan mod elips, dan salin CSS serta-merta.Penjana FlexboxSediakan bekas flex dan itemnya dengan kawalan visual, lihat reka letak bertindak balas secara langsung, dan salin CSS dalam satu klik.Penjana CSS GridTetapkan lajur dan baris anda, seret merentasi sel untuk meletakkan item, dan salin CSS grid dengan HTML yang sepadan dalam satu klik.Kalkulator CSS clamp()Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.Penukar WarnaTukar warna antara HEX, RGB, HSL, HSV, CMYK dan LAB — edit mana-mana medan dan yang lain akan dikemas kini semasa anda menaip.Alat Perkemas & Kecilkan CSSSusun semula inden CSS yang berselerak untuk mudah dibaca, atau kecilkan saiznya untuk dilancarkan — dengan mod selamat yang tidak akan mengubah susunan peraturan anda.Pemeriksa KontrasMasukkan teks dan warna latar belakang untuk melihat nisbah kontras WCAG dan tahap AA serta AAA yang lulus.