Tasarım & CSS

CSS Gradient Üretici

Gradient türünü seç, durakları sürükle, açıyı ayarla, CSS / Tailwind / React inline / SVG çıktısını tek tıkla kopyala — hepsi tarayıcıda.

Gradient stüdyosu

Tür, açı, yumuşaklık ve durakları canlı önizleme eşliğinde ayarla.

Açı

90°

Renk durakları

Hazır gradientler

Birine tıkla, ayarları olduğu gibi yükle, gerekirse ince ayar yap.

Canlı önizleme

Şeffaflığı görmek için ızgara ve örnek metin ekleyebilirsin.

AaBb 123AaBb 123

Kod çıktısı

CSS, Tailwind, React inline ve SVG sürümlerini tek tıkla kopyala.

CSSbackground: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Tailwindbg-gradient-to-r from-[#6366f1] to-[#ec4899]

Reactstyle={{ background: "linear-gradient(90deg, #6366f1 0%, #ec4899 100%)" }}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
  <defs>
    <linearGradient id="uxLinear" x1="0" y1="0.5" x2="1" y2="0.5">
    <stop offset="0%" stop-color="#6366f1" />
    <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>
  <rect width="320" height="200" fill="url(#uxLinear)" />
</svg>