Renkleri seçin, geçişin yerini belirleyin
Gradient, iki renk arasındaki ara tonların bir yüzeye yayılmasıyla oluşan renk geçişidir. Bu gradient generator, seçtiğiniz iki HEX renginden doğrusal veya dairesel bir CSS arka planı oluşturur. Önizlemede gördüğünüz geçişi değiştirmek için yalnız renkleri değil, renk duraklarını da ayarlayabilirsiniz. Bir durak, ilgili rengin geçiş çizgisi üzerindeki konumunu belirtir; rengin kapladığı alanın yüzdesini tek başına ölçmez.
İlk rengi #FF6B00, ikinci rengi #7C3AED, açıyı 90 derece ve durakları %25 ile %75 seçin. 320 piksel genişliğindeki yatay bir kutuda ilk 80 piksel ilk renkte, son 80 piksel ikinci renkte kalır. Aradaki 160 pikselde iki renk birbirine geçer. Durakları %0 ve %100 yaparsanız geçiş kutunun tüm genişliğine yayılır.
Doğrusal geçişte açı hangi yönü gösterir?
CSS açısı saat yönünde ilerler: 0 derece yukarı, 90 sağa, 180 aşağı, 270 sola yönelir. Yön, ilk renkten ikinci renge doğrudur. Dolayısıyla 0 derece seçildiğinde ikinci renk üstte, ilk renk altta görünür. MDN linear-gradient açıklaması bu açı düzenini ve renk duraklarını tanımlar. 360 derece, 0 dereceyle aynı yönü verir.
| Tür | Açı | Duraklar | Sonuç |
|---|---|---|---|
| Doğrusal | 90° | %0, %100 | Soldan sağa tüm genişlik boyunca geçiş |
| Doğrusal | 90° | %25, %75 | Ortada daralan geçiş, iki uçta düz renk |
| Doğrusal | 180° | %0, %100 | Yukarıdan aşağıya geçiş |
| Dairesel | Kullanılmaz | %0, %100 | Merkezde ilk renk, en uzak köşelerde ikinci renk |
Açı ve durak alanları virgül veya noktayla en fazla iki ondalık basamak kabul eder. İlk durak ikinciden küçük olmalıdır. Bu sürüm aynı konumdaki iki renk durağıyla sert sınır üretmez; geçişi daraltmak için birbirine yakın ama farklı yüzdeler seçin.
Dairesel geçişte yüzde 100 neden kenarın ortası değildir?
Dairesel seçenek, merkezden başlayan radial-gradient(circle, ...) üretir. Merkez ve boyut kodda ayrıca belirtilmediği için merkez kutunun ortası, son çemberin boyutu ise en uzak köşeye ulaşacak şekilde belirlenir. Bu varsayılanlar MDN radial-gradient belgesinde açıklanır.
320 × 200 piksellik bir kutunun merkezinden köşesine uzaklık yaklaşık 188,68 pikseldir. %100 durağı bu yarıçap üzerindedir. Kutunun sağ kenarının ortası merkezden yalnız 160 piksel uzakta kaldığı için o noktada geçiş henüz bitmemiş olabilir. Dairesel modda açı alanı kapanır; geçişi döndürmek için açı girmek dairesel yapıyı değiştirmez.
CSS kodunu mevcut tasarımınıza ekleme
90 derece, %25 ve %75 örneğinde kopyalanacak iki bildirim şöyledir:
background: #FF6B00;
background: linear-gradient(90deg, #FF6B00 25%, #7C3AED 75%);Bu satırları arka plan vermek istediğiniz sınıfın CSS kuralına ekleyin. İlk satır düz renk yedeğidir; ikinci satır destekleniyorsa geçişi uygular. Araç sınıf adı üretmez veya kodu sitenize kendiliğinden eklemez. Bir butonun arka planında da kullanılabilir, ancak butonun boyutu, yazı rengi, kenarlığı ve etkileşim durumları ayrıca tanımlanır.
background bir kısaltma özelliğidir. MDN background açıklamasına göre bildirilmeyen arka plan alt özelliklerini varsayılanlarına döndürür. Hedef öğede zaten bir arka plan resmi veya özel konumlandırma varsa iki satırı eklemek bu ayarları değiştirebilir. Mevcut tasarım kuralını bu nedenle birlikte değerlendirin.
Önizleme ile son sayfa arasındaki farkı kontrol edin
Önizleme gerçek CSS kullanır ve kendi kutusunun ölçülerine uyarlanır. Aynı kod dar bir butonda, geniş bir banner alanında veya farklı en boy oranındaki bir kartta farklı bir yayılım gösterebilir. Özellikle eğik ve dairesel geçişlerde son öğenin boyutunu dikkate alın. Bu sürüm iki opak renk ve tek arka plan geçişi üretir; metin dolgusu, gradient kenarlık, tekrarlanan desen veya Android XML çıktısı hazırlamaz.
Sık sorulan sorular
Gradient kodunu background-color içine koyabilir miyim?
Hayır. CSS gradient bir renk değeri değil, oluşturulan bir görüntüdür. background veya background-image özelliğinde kullanılabilir. Bu araç düz renk yedeğiyle birlikte iki background bildirimi üretir. background-color alanına yalnızca HEX gibi tek bir renk değeri yazılabilir.
PNG, JPG veya duvar kâğıdı indirebilir miyim?
Bu sürüm CSS metni üretir ve önizler; PNG, JPG veya belirli piksel boyutunda duvar kâğıdı indirme özelliği yoktur. Kopyala düğmesi görüntü dosyasını değil, iki CSS satırını panoya aktarır.
Şeffaf renk veya üçüncü renk ekleyebilir miyim?
Araç iki adet altı basamaklı HEX renk kabul eder. Üç basamaklı HEX, sekiz basamaklı alfa içeren HEX, rgba(), şeffaf durak ve üçüncü renk alanı bu sürümde bulunmaz. CSS bu seçenekleri destekleyebilir; buradaki formun kapsamı iki opak renkle sınırlıdır.
Seçtiğim geçiş üzerinde yazı okunabilirliği otomatik kontrol edilir mi?
Hayır, araç yazı ve arka plan kontrastını ölçmez. Geçiş boyunca zemin tonu değiştiği için bir uçta okunaklı olan yazı diğer bölgede zor okunabilir. Yazı rengini ve okunabilirliğini, metnin gerçekten yer aldığı tüm bölgelerde son tasarımınız üzerinde kontrol edin.