CSS kutu gölgesi nasıl oluşturup kodunu kopyalayabilirim?

Canlı ön izlemeyi izleyerek x ve y konumu, bulanıklık, yayılma, Renk ve opaklık için kaydırıcıları ayarlayın. Ardından CSS çıktısındaki Kopyala düğmesine basın. Ayrıca Yumuşak, Parıltı veya Material 8 gibi Ön ayarlar'dan da başlayabilirsiniz.

Bir öğeye birden fazla gölge ekleyebilir miyim?

Evet. Daha fazla katman eklemek için + Gölge katmanı ekle düğmesine basın, ardından bunları yeniden sıralayın, her birini Gizle veya Kaldır. Katmanlar tek bir box-shadow değerinde virgüllerle birleştirilir.

İç gölge nasıl yapabilirim?

Bir katman seçin ve İç gölge'yi açın veya İç ön ayarını yükleyin. Çıktı, o katman için inset anahtar kelimesini içerecektir.

Düz CSS yerine Tailwind sınıfı alabilir miyim?

Evet. CSS bildirimine ek olarak araç, boşlukların alt çizgi ile değiştirildiği, işaretlemenize yapıştırmaya hazır shadow-[...] biçiminde bir Tailwind keyfi değer sınıfı çıkarır.

Gölge konumunu ayarlamanın kaydırıcılardan daha kolay bir yolu var mı?

Evet. Aktif katmanın gölgesini taşımak için ön izleme kutusunu sürükleyin, hassas kontrol için Shift tuşunu basılı tutun. Gölgenin tasarımınızda nasıl göründüğünü görmek için Ön izleme arka planı ve Kutu rengi'ni de değiştirebilirsiniz.

Gerçekten ücretsiz mi?

Evet. Tüm araçlar ücretsizdir; hesap veya kredi kartı gerekmez. İşlem sunucularımızda değil cihazınızda yapılır ve araçları ücretsiz sunabilmemizi sağlayan da budur.

Mobilde çalışır mı?

Evet. iOS ve Android'in güncel mobil tarayıcılarında, hiçbir şey kurmadan çalışır.

🎨

Ücretsiz CSS Kutu Gölgesi Oluşturucu

Canlı önizleme, çok katmanlı yığın, renk seçici, iç gölge geçişi ve tek tıklamayla kopyalamayla CSS kutu gölgesi için görsel oluşturucu. Material, nömorfizm ve parıltı ön ayarları içerir.

Tarayıcınızda çalışırKayıt yok, açılır pencere yokGiriş gerekmezSonsuza kadar ücretsiz

Yüklendikten sonra çevrimdışı çalışır

Ön izleme arka planı

Kutuyu sürükleyerek etkin katmanın gölgesini konumlandırın - ince kontrol için Shift tuşunu basılı tutun

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Ön ayarlar

Kutu rengi

Kenar yarıçapı (16px)

x (0px)

y (4px)

bulanıklık (12px)

yayılma (0px)

Renk

Opaklık (15%)

İç gölge

Yaygın kullanımlar

Kart UI GölgeleriPanolar, ürün ızgaraları ve panolar için zarif kart gölgeleri oluşturun.
Düğme Basma EfektleriGerçek dünya derinliğini ve basma durumlarını taklit eden düğme gölgeleri oluşturun.
Neumorphism Soft UIEşleştirilmiş ışık ve koyu gölgeler ile soft-UI neumorphism görünümünü oluşturun.
Modal ve Popover Gölgeleriİletişim kutuları ve açılır menüler için yükseltilmiş, kayan görünümü oluşturun.
Parıltı ve Odak Halkası EfektleriParlayan vurgu efektleri, odak halkaları ve neon tarzı vurgular oluşturun.

Nasıl çalışır

Gölge oluşturucu tamamen istemci tarafında çalışan bir React aracıdır — sunucu yok, kütüphane yok. Durumda gölge katmanı nesnelerinin bir listesini tutar, elle yazılmış bir rgba() biçimlendiricisiyle her değişiklikte geçerli CSS box-shadow dizeleri oluşturur ve bunları React'in style prop'u aracılığıyla doğrudan bir önizleme öğesine uygular; böylece tarayıcının kendi çizim motoru sonucu anında çizer.

1
Katman parametreleri biçimlendiriciyi besler
Her gölge katmanı x/y kaydırmaları, bulanıklık, yayılma, onaltılık renk ve opaklık değeri saklar. Her değişiklikte küçük bir shadowToCss işlevi onaltılık rengi bir düzenli ifadeyle RGB bileşenlerine dönüştürür, ardından rgba() dizesini oluşturur — örneğin 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Birden çok katman virgülle birleştirilir.
2
Tarayıcı canlı önizlemeyi çizer
Oluşturulan dize, JSX'te doğrudan bir div öğesinin boxShadow stil özelliğine atanır. React DOM özniteliğini günceller ve tarayıcının CSS motoru gölgeyi hemen boyar — canvas veya WebGL yoktur, yalnızca yerel CSS çizimi.
3
Sürükleyerek konumlandırma Pointer Events API'yi kullanır
Önizleme kutusuna tıklayıp sürüklemek öğe üzerinde setPointerCapture'ı çağırır, ardından etkin katmanın x ve y kaydırmalarını gerçek zamanlı güncellemek için onPointerMove farklarını izler. Shift'i basılı tutmak ince konumlandırma için 0,25x ölçek faktörü uygular.
4
Çıktı panoya kopyalanır
Araç aynı katman verisinden iki çıktı biçimi üretir: standart bir CSS box-shadow bildirimi ve Tailwind sözdizimi kurallarına göre boşlukların alt çizgiyle değiştirildiği bir Tailwind keyfi değer sınıfı (shadow-[...]). Tek tıkla kopyalama navigator.clipboard.writeText kullanır.