Web Geliştirme
CSS Gradient Generator
Birden fazla renkten doğrusal, dairesel veya konik bir gradyan oluşturun ve hazır CSS'i alın.
0° — üstte, ardından saat yönünde.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Bu araç hakkında makale: CSS gradyanları: linear, radial ve conic'ten nasıl farklıdır
Sıkça sorulan sorular
Doğrusal, radyal ve konik degradeler arasındaki fark nedir?
Doğrusal degradeler seçilen bir açıda düz bir çizgi boyunca geçiş yapar, radyal degradeler bir merkez noktadan daire veya elips olarak dışa doğru yayılır, konik degradeler ise bir renk çarkı gibi bir merkez nokta etrafında renkleri döndürür.
Konik degradeler tüm tarayıcılarda destekleniyor mu?
Tüm güncel büyük tarayıcılar konik degradeleri destekler, ancak bu doğrusal veya radyal degradelerden daha yeni bir CSS özelliğidir, bu yüzden çok eski tarayıcı sürümleri onu işlemeyebilir.
Çıktı olarak ne alıyorum?
Araç, seçtiğiniz renkler, duraklar ve konumlarla kullanıma hazır CSS background sözdizimi üretir, bunu doğrudan stil sayfanıza yapıştırabilirsiniz.
repeating-linear-gradient, normal bir linear-gradient'ten nasıl farklıdır?
Normal bir linear-gradient renk dizisini tüm öğe boyunca tam olarak bir kez gerer, repeating-linear-gradient ise aynı renk durağı dizisini döngüsel olarak tekrarlayarak çizgili veya desenli bir arka plan oluşturur.
Birden fazla gradyanı arka plan olarak üst üste bindirebilir miyim?
Evet, background-image özelliği virgülle ayrılmış bir gradyan listesi kabul eder ve bunlar birden fazla arka plan görselinde olduğu gibi katmanlar halinde üst üste biner — listedeki ilk gradyan en üstte görünür.