CSS Gradient Generator

Doğrusal ve radyal CSS gradyanlarını görsel olarak tasarlayın, renkleri ve açıyı ayarlayın ve CSS'yi kopyalayın.

Nasıl kullanılır

Gradyan türünü seçin — doğrusal veya radyal — ve renklerinizi belirleyin.
Kaydırıcı ile açıyı ayarlayın (yalnızca doğrusal) ve önizlemenin gerçek zamanlı güncellendiğini görün.
CSS'yi tek tıkla kopyalayın ve stil sayfanıza yapıştırın.

Bu araç hakkında

CSS gradyanları modern webin arka plan desenleridir. Doğrusal bir gradyan, seçilen bir açıda bir çizgi boyunca renkleri karıştırır; radyal bir gradyan onları merkez noktadan dışarıya doğru karıştırır. Her ikisi de tek bir CSS özelliğinde tanımlanır, bir görüntü dosyası olmadan herhangi bir çözünürlükte render edilir ve ağ ağırlığında hiçbir maliyetleri yoktur. Bu üretici bildirimi görsel olarak oluşturur.

İki veya üç renk seçin, doğrusal için açıyı ayarlayın veya radyal için bırakın, önizleme sonucu gösterir. Alttaki CSS satırı kopyalamaya hazırdır — bir background özelliği olarak yapıştırın ve son on yılda yayınlanan her tarayıcıda çalışır. Üç renk ikiden daha zengin gradyanlar üretir ve ortadaki renk tasarımı belirleyen veya bozan renktir.

Araç tarayıcınızda çalışır. Sunucu çağrısı yok, oluşturulan görüntü yok, indirilecek dosya yok. Önizlemede gördüğünüz, tarayıcının CSS'den render ettiği şeydir; bu da üretimdeki sonucun aynı olacağı anlamına gelir.

Sık sorulan sorular

Does it work in all browsers?

Evet. CSS gradyanları her modern tarayıcıda desteklenir. Oluşturulan kod, satıcı ön ekleri olmadan standart sözdizimini kullanır.

Üçten fazla renk ekleyebilir miyim?

Araç üç renk durağı sunar. Daha karmaşık gradyanlar için üç duraklı kodla başlayın ve CSS'nizde manuel olarak duraklar ekleyin.

What is the angle?

Gradyanın derece cinsinden yönü. 0 yukarı gider, 90 sağa gider, 180 aşağı gider. Kaydırıcı 0'dan 360'a kadar kapsar.

Metin degradeleri için kullanabilir miyim?

Evet. Gradyanı background-image olarak uygulayın, background-clip: text ve color: transparent ayarlayın. Bu aracın ürettiği CSS, background-image kısmıdır.

Is the gradient an image?

Hayır. Bir CSS bildirimidir. Tarayıcı onu matematiksel olarak render eder, bu nedenle her boyutta keskindir ve sayfaya ağırlık eklemez.

css gradiente linear radial cores gerador background design web frontend visual copiar

İlgili araçlar

CSS Box Shadow Generator Kutu gölgelerini görsel olarak tasarlayın — ofset, bulanıklık, yayılma, renk ve saydamlığı ayarlayın ve CSS'yi kopyalayın. Renk Dönüştürücü Bir rengi HEX, RGB, HSL, HSV ve CMYK arasında canlı çift yönlü eşitlemeyle tarayıcınızda dönüştürün. Renk Paleti Oluşturucu Bir temel renk seçin ve uyumlu paletler oluşturun — tamamlayıcı, üçlü, benzer, bölünmüş tamamlayıcı ve monokromatik. WCAG Kontrast Denetleyici İki renk arasındaki kontrast oranını ölçün ve WCAG AA ile AAA'yı geçip geçmediğini tarayıcınızda anında görün. Renk Karıştırıcı İki rengi oran kaydırıcısıyla karıştırın ve aralarındaki 11 adımlık ölçeğin tamamını tarayıcınızda görün. UUID v4 Oluşturucu Kriptografik rastgelelikle bir veya birden çok rastgele UUID v4 tanımlayıcısı oluşturun.

Uzun bağlantılar mı? Ücretsiz kısaltın

Vai.la, herhangi bir URL'yi tıklama istatistikleri, QR Code ve kendi biolink'inizle birlikte kısa bir bağlantıya dönüştürür.

Bağlantı kısalt Ücretsiz hesap oluşturun

Vai.la, araçların nasıl kullanıldığından veya sonuçlarına dayanarak alınan kararlardan sorumlu değildir.