CSS Gradyan Oluşturucu
CSS gradyanı bir arka plan görselidir. Soldan sağa kırmızıdan maviye geçen gradyan background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); olarak, beyazdan siyaha dairesel olan ise background: radial-gradient(circle at center, #ffffff 0%, #000000 100%); olarak yazılır.
Nasıl kullanılır
- Bir hazır ayar seçin ya da varsayılandan başlayın, sonra Doğrusal veya Dairesel'i seçin.
- Doğrusal gradyanda açıyı kaydırıcıyla ya da sayı kutusuyla ayarlayın. 0 derece yukarıyı, 90 sağı, 180 aşağıyı, 270 solu gösterir. Daireselde circle veya ellipse ile merkezin yerini seçin.
- Renk duraklarını düzenleyin: rengi renk kutusuyla ya da HEX koduyla değiştirin, konumunu yüzde 0 ile 100 arasında verin. En fazla 6 durak ekleyebilir, durak silebilir ya da Eşit aralık ile aralıkları eşitleyebilirsiniz.
- CSS'yi kopyala düğmesine basın. İlk satır eski tarayıcılar için düz bir renk, ikinci satır gradyandır.
Nasıl hesaplanır
Doğrusal gradyan renkleri bir çizgi boyunca karıştırır. Açı bu çizginin yönünü, yukarıdan saat yönünde derece olarak verir: 0deg aşağıdan yukarıya, 90deg soldan sağa gider. Her renk durağı bir rengi çizgi üzerindeki bir konumla eşler, tarayıcı komşu duraklar arasını yumuşakça karıştırır.
Dairesel gradyan renkleri bir merkezden dışa doğru karıştırır. Şekil bir daire (circle) ya da kutuya göre esneyen bir elipstir (ellipse); at top left gibi anahtar sözcükler merkezi taşır. Yüzde 0 konumu merkez, yüzde 100 en uzak kenardır.
Araç CSS'yi yazmadan önce durakları konuma göre sıralar, yani düzenleme sıranız önemli değildir. Aynı konumdaki iki durak geçiş yerine keskin bir sınır oluşturur. Konumlar iki ondalığa yuvarlanır.
Renkler 3, 6 veya 8 haneli HEX kabul eder. 8 haneli biçim bir alfa çiftiyle biter, yani #11182700 tamamen saydamdır. Saydama geçen bir gradyan önizlemede dama deseni üzerinde gösterilir.
Açı kopya kâğıdı
| Açı | Yön | Anahtar sözcükle |
|---|---|---|
| 0deg | Aşağıdan yukarıya | to top |
| 90deg | Soldan sağa | to right |
| 180deg | Yukarıdan aşağıya | to bottom |
| 270deg | Sağdan sola | to left |
| 135deg | Sol üstten sağ alta | to bottom right (yaklaşık) |
Sık sorulan sorular
İlk satır neden düz bir renk?
Gradyanı desteklemeyen ortamlar için bir yedektir. İkinci satırı anlayan tarayıcılar onu kullanır, yedeğe ihtiyacınız yoksa ilk satırı silebilirsiniz.
135deg ne demek?
Gradyan çizgisi sağ alta bakar: sol üst köşeden başlar, sağ altta biter. 90deg soldan sağa, 180deg yukarıdan aşağıya demektir.
Yumuşak geçiş yerine keskin bir şerit nasıl yapılır?
İki durağa aynı konumu verin. Örneğin kırmızı yüzde 50 ve mavi yüzde 50 ortada keskin bir sınır oluşturur.
Saydama doğru nasıl soldururum?
Son durak için #11182700 gibi 8 haneli bir HEX kullanın. transparent anahtar sözcüğüne geçiş, eski Safari gibi eski tarayıcılarda grimsi görünebilir; aynı rengin sıfır alfalı hâli daha güvenlidir.
Conic gradyan destekleniyor mu?
Henüz değil. Bu araç doğrusal ve dairesel gradyanları kapsar.
Bir şey yükleniyor mu?
Hayır. Önizleme ve CSS tarayıcınızda üretilir.