Tasarım ve CSS

Bir kod parçacığını tarayıcınızda, tema, gradyan veya saydam arka plan ve dolgu seçenekleriyle şık, söz dizimi vurgulu bir PNG kartına dönüştürün — yükleme yok.

Bir ön plan ve arka plan HEX rengi arasındaki WCAG kontrast oranını denetleyin ve normal ile büyük metin için AA ve AAA'yı geçip geçmediğini görün.

İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.

Tek bir temel HEX rengini, beyaza ve siyaha doğru karıştırarak Tailwind tarzı 50-950 ton ölçeğine dönüştürün; her adımda bir renk örneği ve kopyalanabilir HEX değeri.

Bir görsel yükleyin ve protanopi, döteranopi, tritanopi veya tam renk körlüğünde nasıl göründüğünü önizleyin, ardından simüle edilmiş sonucu indirin.

Eliptik yatay ve dikey yarıçaplar dahil sekiz border-radius köşe değerinin tümünü ayarlayın, kutunun canlı önizlemesini görün ve kısaltılmış CSS'i kopyalayın.

Ofset, bulanıklık, yayılma, renk ve inset kontrolleriyle çok katmanlı bir CSS box-shadow oluşturun, canlı önizlemeyi görün ve kullanıma hazır özelliği kopyalayın.

Minimum ve maksimum yazı tipi boyutu ile minimum ve maksimum görünüm alanı genişliğini, kesme noktası gerektirmeyen tek bir CSS clamp() akışkan tipografi ifadesine dönüştürün.

Daire, elips, çokgen, inset veya yuvarlatılmış inset ön ayarlarından sayı girişleriyle bir CSS clip-path oluşturun, canlı önizleyin ve kullanıma hazır özelliği kopyalayın.

Bir CSS cubic-bezier yumuşatma eğrisinin dört kontrol noktasını düzenleyin, tutamaçları sürükleyin veya değerleri yazın, eğriyi önizleyin ve cubic-bezier() fonksiyonunu kopyalayın.

CSS Flexbox veya Grid için kapsayıcı özelliklerini ayarlayın, görsel düzenin canlı olarak güncellenmesini izleyin ve oluşturulan CSS'i kopyalayın.

Bulanıklık, saydamlık, doygunluk, kenarlık ve gölge denetimleri ile bir ton rengi kullanarak buzlu cam CSS'i oluşturun, bir arka plan üzerinde önizleyin ve backdrop-filter tabanlı CSS'i kopyalayın.