Canlı Önizlemeli CSS Gradyanı Tasarla
Renkleri, açıyı ve türü seçerek bir CSS gradyanı tasarlayın, canlı önizleyin ve kodu kopyalayın.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Yerelde kurulur
Duyurulmamış markalar için güvenli
Hesap yok
Güvenli bağlantı
Nasıl çalışır
- 1
Renklerinizi seçin
Başlangıç ve bitiş rengini belirleyin; geçişin yönlendirilmesi gerekiyorsa aralarına durak ekleyin.
- 2
Yön ya da şekli ayarlayın
Doğrusal geçiş için bir açı, dairesel geçiş için bir şekil ve konum seçin.
- 3
CSS’i kopyalayın
Üretilen `background` bildirimini doğrudan stil dosyanıza taşıyın.
Neden bu araç
Kurarken görün
Bir renk geçişi uçlarından değil ortasından yargılanır — canlı önizleme, asıl bozulan kısmı gösterir.
Kopyalamaya hazır CSS
Çıktı, doğru biçimlendirilmiş geçerli bir `background` bildirimidir; yapıştırmadan önce temizlik gerekmez.
Doğrusal ve dairesel
Açı ya da şekil denetimiyle her iki tür; bir sitenin ihtiyaç duyduğu geçişlerin neredeyse tamamını karşılar.
Birden çok renk durağı
Orta noktanın verdiğini kabul etmek yerine duraklar ekleyip renkler arasındaki yolu siz yönlendirin.
Hiçbir şey yüklenmez
Bildirim tarayıcınızda kurulur — hiçbir renk değeri hiçbir yere gönderilmez.
Hesapsız ve ücretsiz
Kayıt yok, sınır yok, filigran yok.
Çamurlu orta ve neden oluşur
Renk geçişlerinde en sık yaşanan hayal kırıklığı, iki çekici rengin aralarında donuk bir gri-kahve bant üretmesidir. Bu bir tasarım hatası değil, matematiksel bir sonuçtur: tarayıcılar geçişleri sRGB’de ara değerlendirir, kırmızı, yeşil ve mavi kanallarını birbirinden bağımsız ve doğrusal biçimde harmanlar. Doygun bir maviyle doygun bir sarıyı böyle harmanlayın, orta nokta üç kanaldan da orta miktarlarda taşır — ki grinin tanımı budur. Etki, ton çemberinde birbirinden uzak renkler arasında en kötüdür — maviden sarıya, kırmızıdan yeşile — ve komşu renkler arasında neredeyse fark edilmez. Bunu zevk değil aritmetik olarak görmek, sorunu çözülebilir kılan şeydir.
Ara bir durakla düzeltmek
Pratik çare, yolu tarayıcının seçmesine izin vermeyi bırakmaktır. Ortaya bir renk durağı ekleyin ve geçişin uğraması gereken tona ayarlayın — maviden sarıya giden bir geçiş yeşilden ya da turkuazdan yönlendirildiğinde baştan sona canlı kalır, çünkü ara değerlendirmeye nereye gideceğini siz söylemiş, nötr merkezden kesip geçmesine izin vermemiş olursunuz. O orta rengi seçmek en kolay HSL’de olur; iki uç arasında bir ton açısı seçip doygunluğu yüksek tutabilirsiniz ve renk dönüştürücü bu değeri bildirimin istediği HEX’e çevirir. İyi yerleştirilmiş tek bir durak, solgun görünen geçişlerin çoğunu kurtarır.
Doğrusal ve dairesel, hangisi ne zaman doğru
Doğrusal geçiş, sizin belirlediğiniz bir açıda düz bir eksen boyunca ilerler — yukarıdan aşağıya için 180deg, soldan sağa için 90deg ve aradaki her değer. Bir sayfa arka planı, bir hero bandı ya da bir düğme dolgusu için doğru seçimdir, çünkü göz onu bir nesne değil bir yüzey olarak okur. Dairesel geçiş bir noktadan dışa doğru yayılır ve bir ışık kaynağı ya da parıltı gibi okunur. Dairesel, odak öğenin arkasındaki spot etkisi için işe yarar; tam sayfa arka planı olarak ise kimsenin istemediği bir vinyet gibi görünme eğilimindedir. Karar veremiyorsanız yanıt neredeyse her zaman doğrusaldır.
Renk geçişleriyle metin kolay bir arada durmaz
Metnin arkasındaki bir renk geçişi, web’deki en güvenilir erişilebilirlik hatalarından biridir ve bunun yapısal bir sebebi vardır: kontrast gereksinimi metnin geçtiği her noktada geçerlidir, geçiş ise tanımı gereği her noktada farklı bir arka plana sahiptir. Geçişin açık ucuna karşı 4,5:1’i aşan bir başlık, koyu ucuna karşı 3:1’in altına düşebilir ve bir uçtaki geçer ölçüm diğeri hakkında hiçbir şey söylemez. Metin rengini her iki uca karşı kontrast denetleyicisiyle sınayın; biri kalıyorsa çözüm farklı bir metin rengi değil, metnin arkasına konan düz bir paneldir.
Geçişleri güncel gösteren şey ölçülülüktür
Çağdaş okunan geçişler neredeyse her zaman incedir: aynı tonun açıklıkta birkaç adım ayrılmış iki nüansı, geniş bir yüzeye uygulanmış hâli. Eskimiş okunanlar ise yüksek kontrastlı, çok tonlu ve küçük öğelere uygulanmış olanlardır. Elinizde bir palet varsa en güvenli geçiş, aynı renk ölçeğinin iki komşu adımı arasındakidir — kendini duyurmadan derinlik katar. Gerçek arayüzlerle temasta ayakta kalan bir kural: bir ziyaretçi sayfanızı “şu renk geçişli olan” diye tarif edecekse, geçiş fazlasını yapıyordur.
Performans ve nereye bildirileceği
CSS renk geçişi indirilmez, tarayıcı tarafından çizilir; dolayısıyla ağ isteği maliyeti yoktur ve her boyutta keskin kalır — arka plan görseline karşı gerçek bir avantaj ve geniş düz arka planlarda tercih edilme sebebi. İki uyarı geçerli. Renk duraklarını değiştirerek bir geçişi canlandırmak her karede yeniden çizim zorlar ve pahalıdır; bunun yerine geçişi taşıyan bir katmanda `opacity` ya da `transform` canlandırın. Ve çok büyük bir öğede, çok duraklı bir geçişin çizim maliyeti iki duraklıdan yüksektir; bu da çizim süresinin darboğaz olduğu düşük donanımlı telefonlarda fark yaratır.
Kaçınılması gereken yaygın hatalar
- Bir geçişi iki uç rengine bakarak yargılamak. Uçlar neredeyse her zaman iyi görünür; hata, sRGB ara değerlendirmesinin doygunluğu tükettiği ortadadır. Örneklere değil önizlemeye bakın.
- Uzak tonlar arasında gri bir orta noktayı kabul etmek. Geçişin uğramasını istediğiniz tonda ara bir durak ekleyin — tek durak, solgun geçişlerin çoğunu kurtarır.
- Geçişin üzerine metin koyup tek ucu sınamak. Kontrast gereksinimi metnin geçtiği her noktada geçerlidir; açık ucu ve koyu ucu denetleyin, biri kalıyorsa düz bir panel ekleyin.
- Tam sayfa arka planı olarak dairesel geçiş kullanmak. Yüzey değil vinyet gibi okunur; dairesel odak öğenin arkasındaki parıltı için, doğrusal ise arka planlar içindir.
- Renk duraklarını canlandırmak. Bu, geçişi her karede yeniden çizer — bunun yerine bir katmanda opaklık ya da dönüşüm canlandırın; tarayıcı bunu ucuza birleştirebilir.
Karşılaştırma
| KeroTools | Tarayıcı geliştirici araçları | Tasarım yazılımı | |
|---|---|---|---|
| Düzenlerken canlı önizleme | Var | Var, canlı sayfada | Var |
| Kopyalamaya hazır CSS çıktısı | Var | Var | Sıklıkla yaklaşık |
| Üretmeden önce çalışır | Evet | Hayır — çizilmiş sayfa gerekir | Evet |
| Değerler sunucuya gider | Asla | Hayır | Hayır |
| Hesap ya da lisans | İkisi de değil | İkisi de değil | Lisans gerekir |
| Maliyet | Ücretsiz | Ücretsiz | Ücretli |
Özellikler
Doğrusal geçişler
Derece cinsinden herhangi bir açı ya da CSS’in kabul ettiği anahtar sözcük yönleri.
Dairesel geçişler
Çember ya da elips biçiminde, merkezin nerede duracağı denetlenebilir.
Birden çok renk durağı
Ara renkler ekleyin ve eksen boyunca konumlarını hassasça belirleyin.
Canlı önizleme
Geçiş siz düzenledikçe çizilir, böylece çamurlu orta nokta yayına çıkmadan görünür.
Geçerli CSS çıktısı
Toparlamanız gereken bir parça değil, eksiksiz bir `background` bildirimi.
HEX renk girişi
Kodları doğrudan bir marka belgesinden ya da paletten yapıştırın.
Kurulum yok
İndirilecek ya da kurulacak bir şey yok — web sayfasında çalışır.
Arapça ve RTL uyumlu
Sekiz dilde tam arayüz, sağdan sola Arapça dahil.
Varsayılan olarak güvenli
HTTPS üzerinden sunulur, dosya takibi ve üçüncü taraf yüklemesi yoktur.
Kimler kullanıyor
Ön yüz geliştiricileri
Açıları ve durak konumlarını elle yazmadan geçerli bir geçiş bildirimi elde etmek.
Tasarımcılar
İki renkli bir geçişin gerçekte nasıl çizildiğini, makete girmeden önce görmek.
Şablon temalayan herkes
Ellerindeki iki marka renginden bir hero ya da düğme arka planı üretmek.
Öğrenenler
Açıyı değiştirmenin ya da durak eklemenin ne yaptığını, söz dizimini tahmin etmek yerine görmek.
Sıkça Sorulan Sorular
Hayır. Her şey tarayıcınızda yerel çalışır — hiçbir şey yüklenmez, saklanmaz veya paylaşılmaz.
Evet — tamamen ücretsiz, hesap ve sınır yok.