Tool overview
CSS Gradyan Oluşturucu nedir?
CSS Gradyan Oluşturucu, oKLCH, konik ve Tailwind destekli çok duraklı CSS gradyanları tasarlamak yardımcı olan bir araçtır.
Neden CSS Gradyan Oluşturucu kullanmalısınız?
oKLCH, konik ve Tailwind destekli çok duraklı CSS gradyanları tasarlamak ihtiyacınız olduğunda okunabilirliği ve hızı artırır; veriler sunucuya gönderilmez.
Temel özellikler
İstemci tarafı gizlilik, anında sonuç ve tek tıkla kopyalama. OKLCH, konik ve Tailwind destekli çok duraklı CSS gradyanları tasarlamak
Nasıl kullanılır
Yukarıdaki araçtan doğru sonuçlar almak için bu adımları izleyin.
- Linear, radial veya konik seçin ve canlı önizlemede renk durakları ekleyin.
- Açıyı veya merkez konumunu ayarlayın, daha yumuşak karışımlar için OKLCH’yi açın ve gerekirse sRGB ile karşılaştırın.
- CSS, Tailwind arbitrary sınıfları veya CSS özel özelliklerini kopyalayın — ya da gradyanı sonra geri yüklemek için paylaşım bağlantısı kopyalayın.
- Mevcut background: linear-gradient(...) ifadesini CSS içe aktarmaya yapıştırarak durakları yeniden oluşturun.
- İlgili araçlardan Renk dönüştürücü veya WCAG Kontrast’a giderek durak renklerini doğrulayın.
CSS gradyan oluşturucu rehberi: linear-gradient, OKLCH, konik ve Tailwind
Bu ücretsiz oluşturucuyla CSS Color 4 OKLCH enterpolasyonu, @supports yedekleri, Tailwind sınıfları ve paylaşılabilir URL’lerle çok duraklı linear-gradient, radial-gradient ve conic-gradient CSS kurun.
Doğrusal gradyanlar
Derece cinsinden açı, sınırsız renk durağı, konum ve opaklık. İsteğe bağlı in oklch enterpolasyonu.
Radyal gradyanlar
Yüzde merkezli daire veya elips ve çok duraklı renk rampaları.
Konik gradyanlar
Merkez etrafında from açısıyla renk tarama — pasta ve gökkuşağı efektleri için.
Çok duraklı renk ve opaklık
Durak ekleyin, kaldırın, tersine çevirin veya rastgeleleştirin; yapıştırılan background CSS’i içe aktarın.
OKLCH renk enterpolasyonu
Varsayılan algısal karışımlar; eski tarayıcılar için @supports sRGB yedeklemesi.
CSS, Tailwind ve CSS değişkenleri
Arka plan CSS’i, Tailwind arbitrary sınıfları veya :root özel özellikleri dışa aktarın.
Paylaşılabilir URL’ler ve CSS içe aktarma
Yapılandırmayı ?g= / #g= ile senkronize edin ve yapıştırılan gradyan CSS’den geri yükleyin.
Erişilebilirlik aktarımı
Seçili durakları WCAG Kontrast ve Renk dönüştürücüye derin bağlantılayın.
CSS gradyan metin
Gradyanı dışa aktarıp background-clip: text ve şeffaf metin rengiyle uygulayın (Safari için -webkit-background-clip: text).
CSS gradyan kenarlık
Dışa aktarılan gradyanı dolgulu sarmalayıcı ve iç düz arka planla kullanın veya aynı gradyanla border-image uygulayın.
CSS gradyan animasyonu
Burada statik CSS dışa aktarın, ardından stil sayfanızda background-position veya özel özellikleri canlandırın.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
Sık sorulan sorular
Yaygın hata ayıklama sorunları ve veri gizliliği hakkında genişletilebilir yanıtlar.
Resmi belgeler ve referanslar
Bu yardımcı program için yetkili özellikler ve platform belgeleri.