Design i CSS

Zamień fragment kodu na obraz z podświetlaniem składni w przeglądarce — z ponad 20 językami, własnymi motywami i tłami, numerami wierszy oraz eksportem PNG lub SVG.

Sprawdź kontrast WCAG 2.1 i wynik APCA Lc między kolorem tekstu a tłem, zobacz plakietki AA, AAA i 3:1 oraz zastosuj najbliższy zaliczony kolor.

Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.

Zamień jeden bazowy kolor HEX w skalę OKLCH, HSL lub RGB z regulowaną liczbą stopni, wskazówkami kontrastu WCAG na stopień oraz eksportem do CSS, Tailwind i JSON.

Prześlij obraz i zobacz podgląd tego, jak wygląda przy protanopii, deuteranopii, tritanopii lub całkowitej ślepocie barw, a następnie pobierz symulowany wynik.

Dostosuj wszystkie osiem wartości narożników border-radius, w tym eliptyczne promienie poziomy i pionowy, zobacz podgląd na żywo i skopiuj skrócony CSS.

Twórz wielowarstwowy cień CSS box-shadow za pomocą kontrolek przesunięcia, rozmycia, rozszerzenia, koloru i inset, zobacz podgląd na żywo i skopiuj gotową do użycia właściwość.

Zamień minimalny i maksymalny rozmiar czcionki oraz minimalną i maksymalną szerokość viewportu w jedno wyrażenie CSS clamp() płynnej typografii bez punktów przełamania.

Twórz CSS clip-path z gotowych ustawień koła, elipsy, wielokąta, inset lub zaokrąglonego inset za pomocą pól liczbowych, podglądaj go na żywo i kopiuj gotową właściwość.

Edytuj wygładzanie CSS cubic-bezier lub steps(), przeciągając uchwyty, podglądaj je z animacją na żywo i skopiuj gotową wartość.

Twórz CSS Flexbox lub Grid wizualnie z ustawieniami kontenera i pojedynczych elementów, własnym rozmiarem ścieżek i edytorem grid-template-areas, a potem skopiuj CSS.

Generuj CSS matowego szkła z regulacją rozmycia, przezroczystości, nasycenia, obramowania i cienia oraz kolorem zabarwienia, podejrzyj go na tle i skopiuj CSS oparty na backdrop-filter.