Araçlarım

CSS gradyan oluşturucu

Bir tür ve renkler seçin — canlı güncellenen, kopyalamaya hazır temiz bir CSS gradyan; önizlemesi gözünüzün önünde.

90°

Önizleme

Nasıl kullanılır

  1. Sayfa açıldığında ekranda bir gradyan hazır — ilk sonuç için tıklamanıza gerek yok.
  2. Bir tür seçin: “Lineer” bir açı boyunca gider, “Radyal” bir çemberden yayılır, “Konik” bir merkezin etrafında süpürür. Lineer ve konik için açıyı kaydırıcıyla değiştirin.
  3. Renkleri örneklerden seçin ve her konumu (0–100%) sürükleyerek ayarlayın. Çok duraklı gradyan isterseniz “+ Renk ekle” ile renk ekleyin; ikiden aşağı kaldırmayın.
  4. CSS aşağıda canlı güncellenir — tek tıkla kopyalayın ve CSS alan herhangi bir yere yapıştırın.

Örnek

Ayarlar

Lineer · 90° · #FF5733 @0% → #33A1FF @100%

CSS

linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)

Bu, soldaki #FF5733'ten sağdaki #33A1FF'e giden standart bir lineer gradyandır; 90deg “sağa” demektir. “Radyal” radial-gradient(circle, #FF5733 0%, #33A1FF 100%) verir, “Konik” ise conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%) verir. Her şey düz ASCII'dir ve değiştirilmeden herhangi bir CSS'e yapıştırılır.

Kapsam, sınırlar ve sık sorulan sorular

  • Yalnızca opak renkler: örnekler tarayıcı renk seçicileridir ve alpha göstermez. Saydamlık için önce rengi alfa biçimine dönüştürün, sonra geri dönün.
  • Yalnızca tek standart bölüm: lineer, radyal veya konik — -webkit- öneki yok, katmanlı/çoklu arka plan hileleri yok, radyal boyutlandırma veya merkez konumlandırma yok.
  • Duraklar eklediğiniz sırayı korur — otomatik sıralanmazlar, bu yüzden sıra dışı bir konum bilinçli olarak sert bir sıçrama oluşturur.
  • 2 ile 8 durak arasında. Tek durağa düşmek gradyanı (bir uyarıyla) durdurur; sahte gradyan üretilmez.
  • Hazır değer kitaplığı yok, tüm sayfaya arka plan uygulama yok, gradyanı taşıyan paylaşım bağlantısı yok — paylaşım düğmesi yalnızca sayfa URL'sini paylaşır; hiçbir şey yüklenmez, saklanmaz veya URL'ye yazılmaz.
  • Radyal gradyanlarda açı anlamsızdır, bu yüzden açı denetimi gizlenir ve üretilen kodda açı bulunmaz.

Gradyan elde edildikten sonra kullanıcıların genellikle sıradaki ihtiyacı.

Renk dönüştürücü

Rastgele renk oluşturucu