CSS Gradient Generator
Create CSS gradients
Create CSS gradients Tarayıcınızda yerel olarak çalışır
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
CSS Degrade Oluşturucu, iki renk ve bir açıdan gerçek bir doğrusal veya radyal degrade oluşturur, bunu tam boyutta gösterir ve size CSS'yi verir. Açı insanların yanlış okuduğu kısımdır: CSS'de 0 derece yukarıyı gösterir ve yön saat yönünde döner, yani 90 derece soldan sağa, 180 derece ise yukarıdan aşağıya doğru gider. Bunu yanlış anlamak, bir degradenin ilk seferde sıklıkla baş aşağı görünmesinin nedenidir. Her iki renk de sekiz basamaklı bir alfa değeri taşıyabilir; bu, bir kahraman görüntüsü üzerindeki degradeyi bu şekilde soluklaştırırsınız.
Where people use the
- İki marka rengi arasında kaybolan bir kahraman arka planı oluşturmak.
- Kodda bunu taahhüt etmeden önce hangi açının doğru göründüğünü test etmek.
- Bir kart veya düğme için ince bir dikey degrade oluşturmak.
- Fotoğrafı koyulaştıran yarı şeffaf bir kaplama oluşturma.
How to use the
- 1
Başlangıç ve bitiş renklerini seçin
Renk seçiciyi kullanın veya onaltılık bir değer yazın. Siz değiştirdikçe önizleme ve CSS güncellenir.
- 2
Doğrusal veya radyal seçin
Doğrusal, seçilen bir açıda kutu boyunca uzanır. Radyal bir daire şeklinde merkezden dışarıya doğru yayılır.
- 3
Açıyı ayarlayın
Kaydırıcıyı 0 ila 360 derece arasında sürükleyin. Unutmayın, 0 derece yukarı, 90 derece sağa, 180 derece aşağıya, 270 derece sola.
- 4
CSS'yi kopyalayın
Kural, doğrudan bir stil sayfasına veya isterseniz bir arka plan görüntüsü özelliğine yapıştırabileceğiniz bir arka plan bildirimidir.
İpuçları ve en iyi uygulamalar
- Metin taşıyan arka planlar için küçük bir parlaklık farkı tercih edin; dikkat dağıtıcı olmaktan ziyade doku olarak okunur.
- Degrade üzerindeki metin için yalnızca ortalamayı değil, en açık ve en karanlık noktalardaki kontrastı kontrol edin.
- Degradeleri iki veya üç durakta tutun; daha fazlası çamurlu görünme eğilimindedir.
Sık sorulan sorular
Açı hangi yönü gösteriyor?
Sıfır derece elemanın tepesine doğru yönelir ve açı saat yönünde artar. Yani 90 derece sağa, 180 derece aşağıya doğru gidiyor. Sağdan saat yönünün tersine ölçülen açıların matematik işlemlerine alışkınsanız, bu sezgiye aykırıdır.
Degradem neden şeritli görünüyor?
Çünkü parlaklık açısından yakın olan iki renk, 8 bitlik bir ekranda özellikle geniş bir alanda gözle görülür adımlar üretir. Hafif bir üçüncü durak eklemek veya biraz daha geniş bir parlaklık aralığı kullanmak genellikle onu gizler.
Şeffaflığı kullanabilir miyim?
Evet. Tamamen şeffaf için 667eea00 veya yarım için 667eea80 gibi sekiz basamaklı bir onaltılık değer kullanın; degrade, arkasında ne varsa onun üzerinde kaybolacaktır.
Degrade her yerde destekleniyor mu?
Doğrusal ve radyal degradeler, mevcut tüm tarayıcılarda önek olmadan desteklenir. Satıcı öneklerine yalnızca Safari ve Android'in çok eski sürümleri için ihtiyaç duyulur; bu da pratikte 2015'ten sonra hiçbir şey oluşturulmadığı anlamına gelir.
Gradyanım neden görünmüyor?
Çünkü elemanın yüksekliği yoktur. Öğenin kutusuna bir degrade boyanır, böylece boş bir div sıfır yüksekliğe çöker ve hiçbir şey göstermez. Bir yükseklik ayarlayın veya içerik ekleyin.
İkiden fazla renk durağı oluşturuyor mu?
Hayır, bu araç iki tanesini yönetir. Çok duraklı bir degrade için, ürettiği CSS'yi alın ve durakları elle ekleyin; sözdizimi basitçe daha fazla renk ve virgülle ayrılmış yüzde çiftlerinden oluşur.