Дизайн і CSS
Генеруйте 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.
Симулятор дальтонізму
Завантажте зображення й перегляньте, як воно виглядає за протанопії, дейтеранопії, тританопії чи повної колірної сліпоти, а потім завантажте змодельований результат.
Генератор CSS border-radius
Налаштуйте всі вісім значень кутів border-radius, зокрема еліптичні горизонтальний і вертикальний радіуси, дивіться живий перегляд блока та копіюйте скорочений CSS.
Генератор CSS box-shadow
Створюйте багатошарові CSS-тіні box-shadow з налаштуванням зміщення, розмиття, розтягнення, кольору та inset, дивіться живий попередній перегляд і копіюйте готову властивість.
Генератор CSS clamp()
Перетворіть мінімальний і максимальний розмір шрифту разом із мінімальною та максимальною шириною вʼюпорта на один вираз CSS clamp() для адаптивної типографіки без контрольних точок.
Генератор CSS clip-path
Створіть CSS clip-path із пресетів кола, еліпса, багатокутника, inset або заокругленого inset за допомогою числових полів, дивіться живий попередній перегляд і копіюйте готову властивість.
Генератор CSS cubic-bezier
Редагуйте CSS-плавність cubic-bezier або steps(), перетягуючи маркери, переглядайте її в живій анімації та копіюйте готове значення.
Пісочниця CSS Flexbox і Grid
Візуально будуйте CSS Flexbox або Grid із налаштуваннями контейнера й окремих елементів, довільними розмірами доріжок і редактором grid-template-areas, потім копіюйте CSS.
Генератор CSS-глассморфізму
Створюйте CSS матового скла з налаштуваннями розмиття, прозорості, насиченості, рамки й тіні, а також кольором відтінку, переглядайте попередній перегляд на тлі та копіюйте CSS на основі backdrop-filter.