tigtools

CSS Gradyan Oluşturucu

Renkleri ve konumları seçin, gradyan türünü belirleyin ve kullanıma hazır CSS'i kopyalayın.

Tarayıcınızda çalışır Kayıt gerekmez

Tür
135°
Renk durakları
  1. 1. renk durağı
    #0b5d1e
    0%
    100%
  2. 2. renk durağı
    #f2c14e
    100%
    100%
Buradaki degradede 2 ile 6 arasında renk durağı bulunmalıdır.

Nasıl kullanılır?

  1. Doğrusal, radyal veya konik türü seçin, ardından açıyı ya da merkez konumunu belirleyin.
  2. Her durağın rengini, opaklığını ve konumunu ayarlayın. En fazla altı durak ekleyin veya ihtiyacınız olmayanları kaldırın.
  3. Önizlemeyi kontrol edin, ardından CSS satırını kopyalayıp stil dosyanıza ekleyin.

Nasıl çalışır?

Çıktı, standart bir CSS arka plan bildirimi olur. Doğrusal gradyanlar bir açı boyunca ilerler: 0deg alttan üste, 90deg soldan sağa, 180deg üstten alta gider. Radyal gradyanlar merkez noktasından daire veya kutuya sığan elips biçiminde yayılır. Konik gradyanlar merkez noktasının çevresinde, seçilen açıdan başlayarak döner; pasta dilimi benzeri efektler ve renk tekerlekleri için kullanışlıdır.

Renk durakları konumlarına göre sıralanır, böylece konumlarını sürükleyerek serbestçe değiştirebilirsiniz. Opaklığı azaltılmış bir durak rgba() olarak yazılır ve arka planın görünmesini sağlar. Aynı konumdaki iki durak, renk geçişi yerine keskin bir sınır oluşturur; şeritler bu şekilde yapılır.

Üç gradyan işlevi de güncel tüm tarayıcılarda çalışır. Gradyanlar varsayılan olarak sRGB renk uzayında harmanlanır; bu, tamamlayıcı renkler (örneğin mavi ve sarı) arasında hafif gri bir görünüm oluşturabilir. Daha parlak bir renkte orta durak eklemek bunu önler.

Örnekler

Hafif başlık arka planı

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%), koyu metinlerin okunabilirliğini koruyan yumuşak, yukarıdan aşağıya bir geçiş sağlar.

Keskin kenarlı şeritler

Dört durak kullanın: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. 50% konumundaki iki durak, renk geçişi olmadan birleşerek iki düz renkli yarı oluşturur.

Spot ışığı efekti

Bir rengin üzerine, rgba(255, 255, 255, 0.6) ile rgba(255, 255, 255, 0) arasında, sol üstte daire biçimli bir radyal gradyan katmanı ekleyerek köşede yumuşak bir ışık efekti oluşturabilirsiniz.

Sık sorulan sorular

0deg hangi yöne gider?

CSS'te 0deg yukarıyı gösterir; bu nedenle gradyan alttan başlar ve üstte biter. 90deg soldan sağa gider. Bu, 0° değerinin genellikle soldan sağa anlamına geldiği bazı tasarım uygulamalarından farklıdır.

Gradyanı metinde kullanabilir miyim?

Evet: önce arka planı uygulayın, ardından background-clip: text ve color: transparent ekleyin. Metnin gradyanın her noktasında sayfa arka planı üzerinde okunabilir kaldığından emin olun.

-webkit-linear-gradient gibi tarayıcı öneklerini kullanmam gerekir mi?

Hayır. Güncel tarayıcılar öneksiz söz dizimini destekler. Önekler yalnızca çok eski tarayıcılar için gerekir.

Gizlilik

Her şey tarayıcınızda oluşturulur. Renkleriniz ve ayarlarınız gönderilmez veya saklanmaz.