CSS gradient oluşturucu ile renk geçişi tasarlayın
Modern web sitelerinde butonlardan hero alanlarına kadar pek çok yerde yumuşak renk geçişleri kullanılır. Bu geçişleri elle yazmak, açıları ve yüzdeleri deneme yanılma ile ayarlamak zaman alır. CSS gradient oluşturucu, renkleri ve konumları görsel olarak seçmenizi, sonucu anında önizlemenizi ve hazır kodu tek tıkla kopyalamanızı sağlar.
Linear, radial ve conic gradient
linear-gradient en sık kullanılan türdür; renkler belirttiğiniz açıda (örneğin 90° soldan sağa, 180° yukarıdan aşağı) düz bir çizgi boyunca geçiş yapar. radial-gradient merkezden kenarlara doğru dairesel ya da elips şeklinde yayılır; spot ışığı ve yumuşak arka plan efektleri için idealdir. conic-gradient ise renkleri bir merkez noktası etrafında döndürür; pasta grafikler, renk çarkları ve yükleme animasyonları için kullanılır.
Renk durakları ve hazır şablonlar
Her renk durağının rengini renk seçiciyle, konumunu ise kaydırıcıyla belirleyebilirsiniz. En fazla altı renk ekleyerek gün batımı, okyanus veya neon gibi çok renkli geçişler oluşturabilirsiniz. İlham arıyorsanız hazır gradyanlardan birine tıklayın ya da "Rastgele" butonuyla yeni kombinasyonlar keşfedin. Renkleri HEX ve RGB arasında dönüştürmek için Renk Dönüştürücü aracımızı da kullanabilirsiniz.
Kodu nasıl kullanırım?
Oluşan kod iki satırdan oluşur: ilk satır gradient desteklemeyen eski tarayıcılar için düz bir yedek renk, ikinci satır ise asıl gradient değeridir. Bu kodu CSS dosyanızda istediğiniz seçicinin içine (örneğin .hero { ... }) yapıştırmanız yeterlidir. Gradient arka planlar görsel dosyası gerektirmediği için sayfanızın yüklenme hızını artırır ve Retina ekranlarda bile bulanıklaşmaz. Tüm işlem tarayıcınızda gerçekleşir.