En İyi Özgür CSS Kutu Gölge Oluşturucu
Görsel olarak canlı önizleme, inset ve ikinci bir katman ile CSS kutu-gölgesini inşa edin - kodu kopyalayın.
%100 ücretsiz
Kayıt yok
Su işareti yok
✨
En iyi AI modelleri için Go Pro - resim, video ve sohbet - plus daha büyük yüklemeler, kuyruktaki öncelik ve bekleme yok.
Pro'ya yükselt
Aşk. Best.Free? Paylaş.
Nasıl çalışıyor?
- Kaydırıcıları hareket ettir. Değişim, bulanıklık, yayılma, renk ve opaklığı ayarlayınız; iç gölge istediğinizde inset'i değiştirin.
- Önizlemeyi izle. Canlı kutu çekip çektiğinizde güncellenir; derinlik için İleri seçeneklerde ikinci bir katman ekler.
- CSS'yi kopyala. Copy CSS'ye basın ve kutu-gölge kuralı doğrudan tarz sayfanıza yapıştırın.
Bu araç hakkında
Piksel değerlerini tahmin etmeden bir kutu-gölge tasarlayın. X, Y, bulanıklık ve yayılma kaydırıcılarını çekin, bir gölge rengi seçin ve onun opaklığını değiştirin ve gerçek zamanlı canlı bir önizleme kutusu güncellemesini izleyin - sonra tam kutu-gölge CSS'sini kopyalayın. İç gölge için iç-gölge tuşlarını çevirin. İleri seçenekler ikinci bir gölge katmanı yığır, böylece modern kart ve düğmelerde kullanılan yumuşak, çok katmanlı gölgeleri inşa edebilirsiniz. Her şey tarayıcınızda çalışır.
İnsanlar ne için kullanıyor?
- Kartlara ve modlara yumuşak bir gölge ekle
- Giriş ve kuyular için iç (içe dönük) gölge oluştur
- Gerçekçi, dağınık bir gölge için iki katmanı yığınla
- Tasarım modeline uygun şekilde ofset ve bulanıklığı ayarla
Sıkça Sorulan Sorular
X/Y Ortaklığı gölgeyi yatay ve dikey olarak hareket ettirir, bulanıklık kenarlarını yumuşatır ve bulanıklık uygulanmadan önce bütün gölge büyür veya küçülür. Canlı önizleme her değişikliği anında gösterir.
İnsert, gölgeyi elemanın arkasında değil, içinde çizer, böylece bir baskı görünümü verir - girişler ve geçişler için faydalıdır. Değiştirmek için insert geçişi çevirin.
Bir renk seçin, sonra opaklık kaydırıcısını kullanın; araç gölge doğal olarak karışması için bir rgba() değeri çıkarır.
Evet. Kendi offset, blur, renk ve inset'i ile ikinci bir gölge katmanı etkinleştirmek için Gelişmiş seçenekleri açın.
Hayır. Üreteç tamamen tarayıcınızda çalışır; kaydırıcılar sadece yerel olarak bir CSS dizisi hesaplar.
Tamamen ücretsiz, hesap ve sınırlar yok - ölçmek için hiçbir şey olmayan bir müşteri tarafı aracı.
Evet, tarayıcınızda çalışır, bu yüzden CSS Box Shadow Generator telefonlar ve tabletlerin yanı sıra masaüstü bilgisayarlarda da çalışır - yüklemek için bir uygulama yoktur.
Genellikle tipik bir dosya için birkaç saniye - CSS Box Shadow Generator, girişinizi verdiğiniz anda çalışmaya başlar.
Casual kullanımı, herkes için hızlı tutan cömert adil kullanım kapağı altında sınırsızdır.
Tüm modern tarayıcılar - Chrome, Safari, Firefox ve Edge. CSS Box Shadow Generator, zaten kullandığınız tarayıcının dışında hiçbir şeyin kurulmasına gerek duymaz.