Design i CSS

Zamień fragment kodu na dopracowaną kartę PNG z podświetlaniem składni w przeglądarce, z motywem, tłem gradientowym lub przezroczystym oraz wypełnieniem — bez przesyłania.

Sprawdź współczynnik kontrastu WCAG między kolorem HEX pierwszego planu a tłem i zobacz, czy spełnia AA i AAA dla tekstu normalnego i dużego.

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ę odcieni 50-950 w stylu Tailwind, mieszając go w stronę bieli i czerni; każdy stopień z próbką i kopiowalnym HEX-em.

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 cztery punkty kontrolne krzywej wygładzania CSS cubic-bezier, przeciągaj uchwyty lub wpisuj wartości, podglądaj krzywą i kopiuj funkcję cubic-bezier().

Dostosuj właściwości kontenera dla CSS Flexbox lub Grid, obserwuj wizualny układ aktualizowany na żywo i skopiuj wygenerowany 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.