CSS gradient generator
Design CSS background gradients without memorizing syntax. Switch between linear and radial types, set an angle for linear gradients (degrees), and pick two color stops at 0% and 100%. The preview updates instantly; copy the full background or background-image declaration into your stylesheet. Supports HEX color input with validation.
Açı (°)
Renk 1
Renk 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
How to build a gradient
1. Choose linear or radial gradient.
2. For linear, set angle in degrees (0 = bottom to top, 90 = left to right).
3. Enter start and end colors (HEX).
4. Copy the CSS from the result card into your project.
Degrade örnekleri
Doğrusal kahraman sancağı (135 derece)
135°'de turkuaz #6F9B96 ila şeftali #E8C4B8 — açılış sayfası başlıklarında yaygın olarak görülen bir çapraz. Tam genişlikte bir bölümde arka plan olarak kullanın.
Radyal spot ışığı
Açık merkezi ve koyu kenarı olan radyal tür — bir vinyeti simüle eder: radyal degrade(daire, #fff %0, #333 %100).
Dikey solma (180 derece)
Marka renginden beyaza doğru yukarıdan aşağıya geçiş için 180 açı; gezinme çubuklarının arkasında kullanışlıdır.
Ne zaman kullanılmalı
• Kullanıcı arayüzü arka planlarını prototiplediğinizde ve anında görsel geri bildirim istediğinizde.
• 90 derecelik açının sol-sağ mı yoksa üst-alt mı olduğunu unuttuğunuz zaman.
• CodePen, Tailwind isteğe bağlı değerleri veya tasarım aktarımı için CSS kopyalayıp yapıştırmaya ihtiyacınız olduğunda.
Ne zaman başka bir şey seçmeli
• İkiden fazla renk durağına ihtiyacınız olduğunda kopyalanan CSS öğesini manuel olarak genişletin veya bir tasarım uygulaması kullanın.
• Konik (süpürme) degradeler istediğinizde burada desteklenmez.
• Otomatik karanlık mod çeşitlerine ihtiyaç duyduğunuzda renkleri ayrı ayrı çoğaltın ve ayarlayın.
Renk ayrıntılarında durur
Durak, renk artı isteğe bağlı konumdur: #ff0000 %0, #0000ff %50, #00ff00 %100. Tarayıcı, RGB'yi duraklar arasında enterpolasyon yapar. Orta duraklar şeritli gün batımları veya çok markalı şeritler oluşturur. Burada iki durakla başlayın, ardından doğru görünene kadar devtools'a üçüncü bir durak yapıştırın ve ekleyin.
Doğrusal degrade açıları
CSS açıları “yukarıdan” (0 derece) saat yönünde ölçer. Bu, açıların genellikle sağdan başladığı matematik dersinden farklıdır. Degrade yanlış döndürülmüş görünüyorsa 90 derece ekleyin veya çıkarın. İnce ayar için bu oluşturucunun yanında devtools canlı düzenlemeyi kullanın.
Performans ve geri dönüşler
Degradeler modern tarayıcılarda GPU dostudur. Çok eski istemciler için, degrade çizgisinden önceki daha açık durma rengine düz bir arka plan rengi geri dönüşü ayarlayın.
Sık sorulan sorular
Doğrusal degradenin CSS sözdizimi nedir?
arka plan: doğrusal degrade(açı, renk1 %0, renk2 %100); Açı derece cinsindendir; renkler çizgi boyunca durur.
Renk durakları nasıl çalışır?
Duraklar, her rengin degrade çizgisinde nerede bulunduğunu işaretler. %0 başlangıç, %100 bitiştir. Bu araç iki durağı düzeltir; gerekirse editörünüze daha fazlasını ekleyin.
Doğrusal mı, radyal mi?
Düz bir çizgi boyunca doğrusal karışımlar. Radyal, merkez noktadan dışarıya doğru karışır; daireler ve yumuşak noktalar için iyidir.
Hangi açı değerleri ortaktır?
0 derece yukarı, 90 derece sağa, 180 derece aşağı, 135 derece çapraz — kartlar ve kahramanlar için ortaktır.
Arka planı mı yoksa arka plan resmini mi ayarlıyor?
Çıktı, çoğu div için uygun olan arka plan kısayolunu kullanır; diğer katmanları geçersiz kılıyorsanız arka plan görüntüsüne bölebilirsiniz.
Renkler bir sunucuya gönderiliyor mu?
Hayır. Önizleme yerel olarak oluşturulur.
Bu bedava mı?
Evet, hesaba gerek yok.