Gradyan Oluşturucu

Doğrusal, radyal ve konik gradyanlar tasarlayın; CSS veya görüntü olarak dışa aktarın

Dosyalar cihazınızdan çıkmaz
Tarayıcıda çalışır
Ücretsiz, kayıt yok, filigran yok

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

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

İstediğiniz kadar renk durağıyla doğrusal, radyal ve konik gradyanlar kurun; sRGB, OKLab veya OKLCH içinde karıştırılır. Sonucu CSS, bir Tailwind sınıfı veya SVG olarak kopyalayın ya da kenar başına 8192 px'e kadar PNG, JPG veya WebP görüntüsü olarak indirin.

1
Bir Tür seçin (Doğrusal, Radyal veya Konik) ve Açıyı, Şekli veya merkezi ayarlayın; radyal ve konik için merkezi taşımak üzere önizlemede sürükleyebilirsiniz.
2
Renk duraklarını düzenleyin: durak eklemek için çubuğa tıklayın, taşımak için tutamaçları sürükleyin ve listedeki her rengi ve konumu değiştirin.
3
Renkleri şunun içinde karıştır'ı seçin (sRGB, OKLab veya OKLCH) ya da Hazır ayarlar veya Rastgele'den birinden başlayın.
4
Kodu CSS, Tailwind veya SVG sekmesinden kopyalayın.
5
Bir görüntü için Genişlik ve Yükseklik ayarlayın veya bir boyut seçin, PNG, JPG veya WebP seçin ve İndir'e tıklayın.

Sık sorulan sorular

sRGB, OKLab ve OKLCH karıştırması arasındaki fark nedir?

sRGB klasik CSS karıştırmasıdır; tamamlayıcı renkler ortada griye dönebilir. OKLab algısal olarak eşittir, çamurlu orta noktalar yoktur. OKLCH ton çarkının etrafında dolaşarak renkleri canlı tutar.

OKLab ve OKLCH gradyanları eski tarayıcılarda çalışır mı?

CSS çıktısı, “in oklab” veya “in oklch” desteği olmayan tarayıcılar için önceden hesaplanmış duraklar kullanan bir yedek satırla başlar. SVG kodu ve indirilen görüntüler de önceden hesaplanmış duraklar kullanır, bu yüzden her yerde aynı görünürler.

Konik gradyanlar için SVG sekmesi neden devre dışı?

SVG'de konik gradyan yoktur. Bunun yerine bir PNG, JPG veya WebP görüntüsü indirin.

Saydam duraklar kullanabilir miyim?

Evet, rgba() veya #rrggbbaa gibi alfa içeren renkler çalışır. Saydamlığı korumak için PNG veya WebP indirin; JPG'nin alfa kanalı yoktur.

Görüntü bir sunucuda mı oluşturuluyor?

Hayır. Görüntü tarayıcınızda bir canvas üzerine çizilir ve doğrudan kaydedilir; kenar başına 1 ile 8192 px arasında herhangi bir boyutta.

Bir durağı klavyeyle nasıl ince ayarlarım?

Bir durak tutamacına odaklanın ve %1 taşımak için ok tuşlarını kullanın (Shift ile %10), uçlara atlamak için Home veya End ve kaldırmak için Delete. Bir gradyan her zaman en az iki durak tutar.