CSS Gradyan Oluşturucu

CSS Gradyan Oluşturucu nedir?

CSS Gradyan Oluşturucu, söz dizimini elle yazmak yerine gradyanları görsel olarak oluşturmak isteyen web tasarımcıları ve ön uç geliştiriciler için ücretsiz, tarayıcı içi bir araçtır. Doğrusal, radyal veya konik seçin — isteğe bağlı tekrarlayan varyantıyla — ardından renk duraklarını sürüklenebilir bir önizleme çubuğunda ya da HEX renk ve konum alanlarına sahip durak başına satırlarda düzenleyin. Radyal gradyanlar daire/elips şekli, bir boyut anahtar sözcüğü (closest-side, closest-corner, farthest-side, farthest-corner) ve at X% Y% merkez sunarken, konik olanlar bir başlangıç açısı ve merkez alır. Birden çok gradyan katmanını virgülle ayrılmış tek bir arka planda üst üste koyabilir, rastgele gradyan üretebilir, seçilmiş palet ön ayarları uygulayabilir, her durağın tonunu döndürebilir ve yapıştırmaya hazır background kuralını kopyalayabilirsiniz.

CSS Gradyan Oluşturucu nasıl kullanılır

1. Gradyan türünü seçin — Doğrusal, Radyal veya Konik — ve tekrarlayan desen için seçeneklerde Tekrarlayan'ı açın.
2. Durakları önizleme çubuğu boyunca sürükleyerek yeniden konumlandırın, durak eklemek için çubuğun boş bir noktasına tıklayın veya bir durağı kaldırmak için çift tıklayın.
3. Her durağı HEX renk ve konum alanlarıyla ince ayarlayın ya da (destekleniyorsa) damlalıkla ekranınızdan renk alın.
4. Radyal gradyanlar için şekli (daire veya elips), bir boyut anahtar sözcüğünü ve merkez X/Y'yi ayarlayın; konik için başlangıç açısı ve merkezi.
5. Gradyanları tek bir arka planda üst üste koymak için katman ekleyin, Rastgele'yi deneyin, bir palet uygulayın veya tüm tonları bir kerede döndürün.
6. Oluşturulan CSS background kuralını kopyalayıp stil sayfanıza yapıştırın.

Örnekler

Doğrusal, 90deg, #4f86f7 %0'da ve #9333ea %100'de

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radyal, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Katman 1 doğrusal 90deg; Katman 2 radyal circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Sıkça sorulan sorular

Hangi gradyan türleri ve seçenekleri destekleniyor?

Doğrusal, radyal ve konik gradyanlar, her biri isteğe bağlı tekrarlayan varyantıyla. Radyal, daire/elips şekli, bir boyut anahtar sözcüğü (closest-side, closest-corner, farthest-side, farthest-corner) ve at X% Y% merkez ekler; konik, başlangıç açısı ve merkez ekler. Ayrıca birden çok katmanı tek bir arka planda üst üste koyabilirsiniz.

Sürüklenebilir durak çubuğu nasıl çalışır?

Konumunu değiştirmek için herhangi bir durağı çubuk boyunca sürükleyin, ara değerli bir renkle yeni durak eklemek için çubuğun boş bir kısmına tıklayın ve kaldırmak için bir durağa çift tıklayın (en az iki durak korunur). Her durağın çubuğun altında HEX renk ve konum alanları da vardır.

Ekranımdan renk alabilir miyim?

Evet, EyeDropper API'sini destekleyen tarayıcılarda. Kullanılabilir olduğunda her durağın yanında bir damlalık düğmesi belirir; tıklayın ve ekrandaki herhangi bir pikseli seçin. Bunun yerine her zaman bir HEX değeri yazabilir veya yerleşik renk çipini kullanabilirsiniz.

Rastgele, paletler ve ton döndürme ne yapar?

Rastgele, etkin katmanı yeni bir rastgele gradyanla değiştirir, palet ön ayarları etkin katmanın duraklarını seçilmiş bir renk kümesiyle değiştirir ve Tonu döndür her katmandaki her durağın tonunu bir kerede kaydırır. Yalnızca tıkladığınızda gradyanı değiştirirler.

Renklerim veya CSS'im bir yere yükleniyor mu?

Hayır. Gradyan tamamen tarayıcınızda yerel dize ve renk hesaplamalarıyla oluşturulur — hiçbir renk, CSS veya ayar asla bir sunucuya gönderilmez, böylece çevrimdışı çalışır ve çalışmanızı gizli tutar.