CSS Gölge Oluşturucu
Canlı önizlemeyle katmanlı CSS box-shadow oluştur. Ofset, bulanıklık, yayılma, renk ve iç gölgeyi ayarla; CSS, SCSS, Tailwind veya JavaScript çıktısını kopyala.
Canlı önizlemeyle katmanlı CSS box-shadow oluştur. Ofset, bulanıklık, yayılma, renk ve iç gölgeyi ayarla; CSS, SCSS, Tailwind veya JavaScript çıktısını kopyala.
- Girdini hazırla
Aşağıdaki kontrollerle ihtiyacın olan seçenekleri belirle.
- İşlemi çalıştır
Aşağıdaki kontrolleri ayarla ve önizlemeyi incele.
- Sonucu kullan
Sonucu kontrol et; varsa kopyalama veya indirme düğmeleriyle kullan.
Piksel tabanlı gölgeleri CSS, SCSS, Tailwind sınıfı ve JavaScript olarak dışa aktarın. Renk değişkenleri hedef sayfada tanımlanmalıdır. Tailwind çıktısı özel değer sözdizimini kullanır; hedef projede kontrol edin.
Oluşturulan Kod
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
Gölge Kontrolleri
Önizleme Ayarları
Canlı Önizleme
Gölge Ön Ayarları
İnce Gölgeler
Orta Gölgeler
Güçlü Gölgeler
Material Design
Nömorfik
CSS Gölge Oluşturucu
Kare, yuvarlatılmış veya dairesel önizlemede sonucu görerek bir ya da daha fazla box-shadow katmanı oluştur. Yatay/dikey ofseti, bulanıklığı, yayılmayı, RGBA rengini, görünürlüğü ve iç gölge modunu ayarla; ardından katmanları sırala veya kaldır. Ön ayarlarda hafif, orta, güçlü, Material tarzı ve neumorphic örnekler bulunur.
Üretilen değeri CSS, SCSS, Tailwind özel gölge değeri veya JavaScript nesnesi olarak kopyala. Tailwind çıktısı özel değer kullanır ve proje yapılandırması gerektirebilir; renk değişkenleri çıktıyı yapıştırdığın sayfada tanımlı olmalıdır. Önizleme gölgeyi gösterir; son bileşeninin kontrastını veya gerçek yükselti ilişkisini doğrulamaz.
Özellikler
- Katmanlı ofset, bulanıklık, yayılma, RGBA renk, görünürlük ve iç gölge ayarlarını düzenle.
- Kare, yuvarlatılmış veya dairesel yüzeyi seçilen boyut ve arka planla önizle.
- Hafif, Material tarzı veya neumorphic ön ayarla başla; katmanları sırala.
- CSS, SCSS, Tailwind veya JavaScript çıktısını kopyala.
Nasıl kullanılır
- Ön ayar seç veya etkin katmanın ofset, bulanıklık, yayılma ve rengini ayarla.
- İç gölgeyi ya da görünürlüğü değiştir; birden fazla etki gerekiyorsa katman ekle.
- Katmanları sırala ve canlı önizlemeyi hedef yüzeyle karşılaştır.
- Çıktı biçimini seçip kopyala; değişkenleri veya Tailwind yapılandırmasını projende tanımla.