Дизайн и CSS

Превратите фрагмент кода в аккуратную PNG-карточку с подсветкой синтаксиса прямо в браузере — с темой, градиентным или прозрачным фоном и отступами, без загрузки на сервер.

Проверьте коэффициент контраста WCAG между HEX-цветом текста и фона и узнайте, проходит ли он AA и AAA для обычного и крупного текста.

Смешивайте два HEX-цвета в выбранной пропорции в цветовом пространстве RGB или Lab и считывайте полученный промежуточный цвет в виде образца и копируемого HEX-значения.

Превратите один базовый цвет HEX в шкалу оттенков 50-950 в стиле Tailwind, смешивая его с белым и чёрным; каждая ступень с образцом и копируемым HEX.

Загрузите изображение и посмотрите, как оно выглядит при протанопии, дейтеранопии, тританопии или полной цветовой слепоте, а затем скачайте смоделированный результат.

Настройте все восемь значений углов border-radius, включая эллиптические горизонтальный и вертикальный радиусы, смотрите живой предпросмотр блока и копируйте сокращённый CSS.

Создавайте многослойные CSS-тени box-shadow с настройкой смещения, размытия, растяжения, цвета и inset, смотрите живой предпросмотр и копируйте готовое свойство.

Превратите минимальный и максимальный размер шрифта вместе с минимальной и максимальной шириной вьюпорта в одно выражение CSS clamp() для адаптивной типографики без контрольных точек.

Создайте CSS clip-path из пресетов круга, эллипса, многоугольника, inset или скруглённого inset с числовыми полями, смотрите живой предпросмотр и копируйте готовое свойство.

Редактируйте четыре контрольные точки кривой плавности CSS cubic-bezier, перетаскивайте манипуляторы или вводите значения, просматривайте кривую и копируйте функцию cubic-bezier().

Настраивайте свойства контейнера для CSS Flexbox или Grid, наблюдайте за обновлением визуального макета в реальном времени и копируйте сгенерированный CSS.

Создавайте CSS матового стекла с настройками размытия, прозрачности, насыщённости, рамки и тени, а также цветом оттенка, смотрите предпросмотр на фоне и копируйте CSS на основе backdrop-filter.