Katmanlı, yumuşak ve modern CSS kutu gölgelerini canlı önizleme panelinde görsel olarak tasarlayın.
Modern kullanıcı arayüzü (UI) tasarımında gölgeler, düz elemanlara gerçekçi bir derinlik, hiyerarşi ve fiziksel hissiyat kazandıran en önemli görsel tasarım araçlarıdır. Ancak CSS box-shadow özelliğinin parametrelerini (yatay/dikey ofset, bulanıklık, yayılma ve renk opaklığı) kod üzerinde deneme-yanılma yöntemiyle yazmak tasarımcılar için son derece zahmetlidir. Bu görsel gölge stüdyosu, interaktif kaydırıcılarla gölgeleri anlık olarak modellemenizi ve üretim kodu almanızı sağlar.
Örneğin bir kart bileşeni veya modal penceresi için modern bir gölge tasarlamak isteyen bir geliştirici; 0px yatay ofset, 12px dikey ofset, 24px bulanıklık (blur), -4px yayılma (spread) ve rgba(0, 0, 0, 0,12) renk değerlerini seçtiğinde doğal ve yumuşak bir yükseklik etkisi elde eder. Araç aynı zamanda elemanın içine gölge veren inset seçeneğini ve profesyonel UI kütüphanelerinde kullanılan çok katmanlı (multi-layered) gölge desteğini tek tıkla CSS kodu olarak kopyalanabilir halde sunar.
Gölge render etme ve CSS kodu derleme süreçleri tamamen tarayıcınızın içinde gerçekleşir. Tasarım stilleriniz, renk paletleriniz veya arayüz parametreleriniz hiçbir harici sunucuya iletilmez; tasarımlarınız tamamen yerel kalır.
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
CSS kutu gölgesi spesifikasyonuna göre ofset değerleri gölgenin konumunu, blur dağılmayı, spread ise gölgenin genişleme veya daralma miktarını piksel cinsinden yönetir.