Дизайн і 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.