İçeriğe atla
patrache.tools

Gradyan Oluşturucu

Ücretsiz çevrimiçi CSS gradyan oluşturucu. Doğrusal ve dairesel, yön, renk, durma noktası ayarlayın. Kodu kopyalayın. Tarayıcıda işlenir.

Tür
Açı
90°
Renkler
0%
100%
CSS kodu
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockDosyalar hiçbir sunucuya gönderilmez
Paylaş
Göm

Bu aracı sitenize gömün

Ücretsiz çevrimiçi CSS gradyan oluşturucu. Doğrusal, radyal ve konik gradyanları görsel olarak tasarlayın, ardından CSS kodunu anında kopyalayın.

Gradyan Oluşturucu nasıl kullanılır?

  1. Gradyan türünü seçin (doğrusal, radyal vb.).
  2. Renk durakları ekleyin ve renkleri ayarlayın.
  3. Oluşturulan CSS kodunu kopyalayın.

Gradyan Oluşturucu hakkında sık sorulan sorular

Hangi gradyan türleri destekleniyor?

Doğrusal, radyal ve konik gradyanlar desteklenir.

CSS kodunu doğrudan kopyalayabilir miyim?

Evet, oluşturulan CSS gradyan kodunu tek tıklamayla kopyalayarak doğrudan web sitenize uygulayın.

Renk geçişimin ortasında neden çamurumsu gri bir şerit beliriyor?

İki renk çemberde tam karşılıklı durduğunda karışım, doygunluğun sıfıra yaklaştığı bir noktadan geçer ve bu donuk gri bir şerit olarak görünür. Mavi-turuncu ile kırmızı-yeşil eşleşmeleri her zamanki suçlulardır. Araya üçüncü bir rengi durak olarak eklemek geçişi grinin çevresinden dolaştırır; çemberde birbirine yakın iki ton seçmek ise sorunu baştan ortadan kaldırır.

Renk geçişini yalnızca CSS olarak değil, görsel dosyası olarak da kaydedebilir miyim?

Evet, PNG olarak indirip doğrudan bir slayt arka planında, sosyal medya görselinde ya da baskı düzeninde kullanabilirsiniz. Ancak web sayfası için CSS daha iyidir: indirilecek dosya yoktur, geçiş her ekran boyutuna bozulmadan yayılır ve büyütülmüş bir bit eşlemdeki merdiven etkisi hiç görünmez.

Gradyan Oluşturucu etkili kullanım ipuçları

  • Renk çemberinde birbirine yakın iki tonu karıştırın; karşıt renkler ortada kirli gri verir.
  • Banner ve kart arka planları için 135 derecelik köşegen en güvenli varsayılandır.
  • Üzerine metin gelecekse kontrastı gradyanın en açık durağına göre kontrol edin.

Powered by Patrache Studio Tools

Bu sitede reklamlara izin verin

Bu araçları kullanmak için bu sitede reklamlara izin verin. Reklamlar bu hizmetin ücretsiz kalmasını sağlar.

Reklam engelleyicinizi açın, bu site için engellemeyi kapatın ve yeniden kontrol edin.