CSS gradyan oluşturucu

Doğrusal, dairesel veya konik bir gradyan tasarlayın ve CSS’i kopyalayın.

Tür

Açı: 135 derece

Renk durakları

100%

CSS

background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);

Dosyalarınız cihazınızda kalır

Nasıl çalışır

1Doğrusal, dairesel veya konik seçin.
2Açıyı veya dairesel için şekli ayarlayın.
3Renkleri seçin ve her durağı konumuna sürükleyin. Renk durağı ekle ile durak ekleyin.
4CSS’i kopyalayıp stil dosyanıza yapıştırın.

Doğrusal: Renkler düz bir çizgi boyunca karışır. Açı yönü belirler: 0 derece yukarı, 90 sağa, 180 aşağı gider.
Dairesel: Renkler merkezden daire veya elips olarak yayılır.
Konik: Renkler merkez etrafında bir renk çarkı veya pasta grafiği gibi döner. Açı başlangıcı döndürür.
Renk durakları: Her durak, yüzde 0 ile 100 arasında bir konumdaki renktir. En fazla sekiz.

Her şey tarayıcınızda çalışır. Yazdığınız hiçbir şey sunucuya gönderilmez.

Hangi tarayıcılar bu gradyanları destekler?

Doğrusal ve dairesel gradyanlar her güncel tarayıcıda çalışır. Konik gradyanlar Chrome, Edge, Firefox ve Safari’nin tüm güncel sürümlerinde çalışır.

Karışım yerine sert bir kenarı nasıl yaparım?

İki durağı aynı konuma koyun, örneğin %50’de kırmızı ve %50’de mavi. Aralarında karışım mesafesi olmadığı için geçiş keskin olur.

Bunu metin rengi veya kenarlık olarak kullanabilir miyim?

Evet. Aynı değeri background-image içinde kullanın; metin için background-clip: text, kenarlık için border-image ile birlikte.

Sayfa neden seçtiğimden farklı bir renk gösteriyor?

Renk seçici sRGB hex değerlerini kullanır. Geniş renk aralıklı ekranlar bunları biraz farklı gösterebilir, ancak CSS değerleri kesindir.

Saydamlık nasıl eklerim?

Bu araç düz hex renkler verir. Kodu düzenleyip bir rengi #4f46e580 gibi sekiz haneli hex’e veya rgba()’ya çevirin.