Box Shadow Jeneratörü

Kutu gölgesi oluşturmak için kaydırıcıları sürükleyin, derinlik için katmanlar ekleyin ve bitmiş CSS kodunu anında kopyalayın.

Gölge katmanları
Katman 1
CSS
Gölgelendirmenizi şekillendirmek için kaydırıcıları ayarlayın.

Her gölge tarayıcınızda oluşturulur. Burada yaptığınız hiçbir ayar BroBroGo sunucularına yüklenmez.

SSS

Uzaklık, bulanıklık ve yayılma tam olarak neyi kontrol eder?

Uzaklık (offset) gölgeyi sağa/sola ve yukarı/aşağı hareket ettirir, bulanıklık (blur) kenarlarını yumuşatır ve yayılma (spread) bulanıklaşmadan önce gölgeyi büyütür veya küçültür. Negatif bir yayılma değeri gölgeyi içeri çeker, bu da dar ve yakın gölgeler için kullanışlıdır.

İç gölge (inset) seçeneği ne işe yarar?

Normal bir gölge, yükseltilmiş bir kartın arkasındaki ışık gibi elemanın dışına düşer. Inset ise gölgeyi içeriye doğru çevirir, böylece eleman içeri göçmüş gibi görünür; bu, basık girdiler (inputs) veya basılmış butonlar için kullanışlıdır.

Neden birden fazla gölge katmanı üst üste eklenir?

Tek bir gölge, belirli bir boyuttan sonra yapay ve düz görünür. Gerçekçi bir derinlik hissi genellikle dar ve koyu bir gölge ile yumuşak ve daha geniş bir gölgenin birleşiminden oluşur. İkinci bir katman ekleyip her birini bağımsız olarak ayarlayarak bu etkiyi elde edebilirsiniz.

CSS Cubic Bezier JeneratörüBir geçiş eğrisi şekillendirmek için iki kolu sürükleyin, sabit bir hıza karşı hareketini izleyin ve cubic-bezier() değerini kopyalayın.Gradyan JeneratörüDoğrusal, radyal veya konik bir gradyan oluşturun, renk durakları ekleyin, yönü belirleyin ve CSS kodunu tek tıkla kopyalayın.Border Radius JeneratörüKaydırıcılarla her köşeyi yuvarlatın, eliptik modla organik damla şekilleri oluşturun ve CSS kodunu anında kopyalayın.Flexbox JeneratörüGörsel kontrollerle bir flex kapsayıcısı ve öğelerini kurun, düzenin canlı tepki vermesini izleyin ve tek tıkla CSS kodunu kopyalayın.CSS Grid JeneratörüSütunlarınızı ve satırlarınızı belirleyin, öğeleri yerleştirmek için hücreler üzerinde sürükleyin ve tek tıkla eşleşen HTML ile birlikte grid CSS kodunu kopyalayın.CSS clamp() HesaplayıcıKüçük ve büyük ekranlar için bir boyut girin ve yazı boyutları, padding, margin veya gap değerleri için aralarında sorunsuz bir şekilde ölçeklenen akıcı bir clamp() değeri elde edin.Renk DönüştürücüRenkleri HEX, RGB, HSL, HSV, CMYK ve LAB arasında dönüştürün — herhangi bir alanı düzenleyin, diğerleri siz yazdıkça güncellensin.CSS Güzelleştirici & KüçültücüDüzensiz CSS'i okumak için yeniden girintileyin veya kurallarınızın sırasını asla değiştirmeyen güvenli modla küçültüp yayınlayın.Kontrast KontrolüWCAG kontrast oranını ve hangi AA ile AAA seviyelerinin geçtiğini görmek için bir metin ve arka plan rengi girin.