CSS Gradyan Oluşturucu

Renk ve açı seçerek CSS gradyan kodunu önizleme ile oluştur

Güncelleme bilgisiCSS gradyan oluşturucu eklendi, renk ve açı seçerek kod oluşturGüncellemeleri görüntüle

Özellikler

Önizleme ve Kod Eş Zamanlı Güncelleme

Renk veya açı değiştirdikçe görünüş ve CSS aynı anda değişir

Doğrusal, Radyal ve Konik Destekleme

Açı, şekil ve merkez konumunu türe göre ayrıntılı olarak belirtin

En Fazla 10 Rengi Sürükleyerek Ayarla

Renk konumunu bar üzerinde sürükleyerek, saydamlığı kaydırıcı ile ayarlayın

8 Örnek ve Rastgele Oluşturma

Klasik renk şemaları veya rastgele şemalardan başlayarak ince ayar yapın

Kullanım Şekli

Türü Seç

Doğrusal, radyal veya konik türünden gradyan türünü seçin

Rengi Belirle

Renk kodu veya örnekle renk seçin, "Renk Ekle" ile renk artırın ve konum ve saydamlığı ayarlayın

Yönü Ayarla

Doğrusal için açı veya yön düğmeleri, radyal ve konik için merkez konumunu belirtin

Kodu Kopyala

"Kopyala" düğmesi ile tek satırlı CSS'i stilinize yapıştırın

Kullanım Alanları

Hero Görüntü Arka Planı Oluşturma

Sitenin en üstü veya düğmelerinin arka plan rengini kod yazmadan belirleyin

Blog Başlığı Renk Seçimi

Örneğe yakın renk şemasını seçerek makale başlığı arka planını düzenleyin

Fotoğrafın Üzerine Bindirme Katmanı

Düşük saydamlıkla rengi fotoğrafın üzerine bindirerek yarı saydam katman oluşturun

Çok Renkli Gradyan Ayarı

3 veya daha fazla renkli sınırları sürükleyerek adım adım yakınlaştırın

Temel Bilgiler

linear, radial ve conic Arasındaki Fark

CSS'deki gradyanın renk değişiminin farklı olduğu 3 işlevi vardır ve hepsi background özelliğine yazılarak kullanılır.

linear-gradient：linear-gradient, belirtilen açı doğrultusunda rengin değiştiği doğrusal gradyandır.
radial-gradient：radial-gradient, merkez konumundan dışa doğru daire veya elips şeklinde rengin yayıldığı radyal gradyandır.
conic-gradient：conic-gradient, merkez konumu etrafında saat yönünde tam tur dönerken rengin değiştiği konik gradyandır.

Açı ve Yön Anahtar Sözcüğü Karşılığı

linear-gradient'in açısı 0deg olarak aşağıdan yukarıya doğru yönlendir ve sayı arttıkça saat yönünde döner. Açı "to right" gibi yön anahtar sözcüğü ile de yazılabilir; 90deg "to right" ile, 180deg "to bottom" ile aynı yöne denk gelir.

Renk Durdurma Noktası ve Saydamlık Yazımı

Renk durdurma noktası (renk durağı), gradyanda o renge sahip olduğu konumu gösterir; %0 başlangıç noktası, %100 bitiş noktasını temsil eder. Örneğin "#3B82F6 0%, #8B5CF6 100%" başlangıç mavisinden bitiş moruna rengin değiştiğini tanımlar.

#RRGGBB Biçimi：#RRGGBB biçimi, kırmızı, yeşil ve maviyi 2 basamaklı 16'lı sayıyla gösteren renk yazımıdır; #FF0000 donuk kırmızıyı temsil eder.
rgba Biçimi：rgba biçimi, kırmızı, yeşil ve mavi değerlerine (0–255) saydamlık (0–1) eklediği renk yazımıdır; %50 saydamlık yarı saydam rengi temsil eder.