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.

Gradyan türü
Renk durakları
CSS
Gradyanınızı şekillendirmek için durakları ve yönü ayarlayın.

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

SSS

Doğrusal, radyal ve konik gradyanlar arasındaki fark nedir?

Doğrusal (linear) gradyan, renkleri bir açı ile belirlediğiniz düz bir çizgi boyunca karıştırır. Radyal (radial) gradyan, renkleri merkezden dışarıya doğru bir daire veya elips şeklinde yayar. Konik (conic) gradyan ise renkleri bir renk çarkı gibi merkezin etrafında süpürür.

Renk durakları (color stops) nedir?

Her renk durağı, gradyan boyunca belirli bir konuma sabitlenmiş bir renktir — başlangıçta %0, bitişte %100. Rengin zirve yaptığı yeri kaydırmak için bir durağı hareket ettirin veya daha zengin bir karışım için daha fazla durak ekleyin. En fazla sekiz adet kullanabilirsiniz.

Yönü nasıl kontrol ederim?

Doğrusal (linear) veya konik (conic) bir gradyan için açı kaydırıcısı yönü belirler — 0° yukarıyı, 90° sağı gösterir. Radyal (radial) gradyanın açısı yoktur; bunun yerine yayılma şeklini değiştirmek için daire veya elips şeklini seçin.

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.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.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.