Дизайн и CSS

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

Проверьте контраст WCAG 2.1 и оценку APCA Lc между цветом текста и фона, посмотрите значки AA, AAA и 3:1 и примените ближайший проходящий цвет.

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

Превратите один базовый цвет HEX в шкалу OKLCH, HSL или RGB с настраиваемыми ступенями, подсказками контраста WCAG на каждой ступени и экспортом в CSS, Tailwind и JSON.

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

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

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

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

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

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

Визуально стройте CSS Flexbox или Grid с настройками контейнера и отдельных элементов, произвольными размерами дорожек и редактором grid-template-areas, затем копируйте CSS.

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