Бои и дизајн

Изберете, претворете и комбинирајте бои и генерирајте CSS за вашите проекти.

• Flexbox и Grid игралиште Градете flexbox и CSS grid распореди визуелно. Подесете својства на контејнер и елементи, именувајте области, видете резултат во живо и копирајте CSS и HTML.
• Генератор на border-radius Обликувајте го CSS border-radius визуелно со повлекување. Подесете секој агол во px или %, користете елиптична синтакса со 8 вредности и копирајте го кодот.
• Генератор на box-shadow Креирајте слоевити CSS сенки со преглед во живо. Подесете поместување, заматување, ширење, боја, провидност и inset, пробајте неуморфизам и копирајте го кодот.
• Генератор на clip-path Цртајте CSS clip-path облици со точки што се влечат. Уредувајте полигони, кругови, елипси и inset, почнете од ѕвезди и стрелки и копирајте го кодот.
• Генератор на CSS градиент Создавајте линеарни, радијални и конусни CSS градиенти со преглед во живо. Додавајте и влечете точки на боја, подесете агол и копирајте чист CSS код.
• Генератор на палета на бои Генерирајте палети на бои од една основна боја според правилата на хармонија: комплементарна, аналогна, триадна, тетрадна, квадратна и монохроматска.
• Генератор на светли и темни нијанси Генерирајте светли и темни нијанси на која било боја во чекори од 5, 10, 20 или 25 %, мешани во OKLCH или sRGB, и извезете ги како CSS или Tailwind.
• Избирач на боја Бесплатен онлајн избирач на боја. Изберете која било боја и веднаш копирајте ги нејзините HEX, RGB, HSL, HSV и CMYK кодови со контраст спрема бела и црна.
• Избирач на боја од слика Качете слика во прелистувачот и кликнете на кој било пиксел за да ја добиете бојата како HEX, RGB, HSL, HSV и CMYK. Лупа, просек и листа на избрани бои.
• Калкулатор за сооднос на страни Калкулатор за сооднос на страни: поедноставете ширина и висина, променете големина со ист сооднос, споредете 16:9, 4:3 или 21:9 и копирајте CSS код.
• Комбинации на фонтови Прегледајте комбинации на фонтови за наслови и текст со 20 фонтови со отворена лиценца, прилагодете големина и висина на ред и копирајте ги CSS font-family.
• Намалување на фонт (subset) Намалете го фонтот на знаците што ви требаат со HarfBuzz, во прелистувач. Добијте помал TTF/OTF и WOFF, преглед и @font-face правило со unicode-range.
• Палета на бои од слика Извлечете палета на бои од која било слика. Качете фотографија и добијте ги нејзините доминантни бои како HEX кодови со нивниот удел, подготвени за копирање.
• Претворач на PX во REM Претворете px во rem и em со која било големина на коренски фонт, направете табела за масовно претворање и претворете ги сите px вредности во CSS код во rem.
• Претворач на бои Претворете боја меѓу HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH и OKLCH. Залепете код, видете ја бојата и копирајте го секој формат со еден клик.
• Проверка на контраст Бесплатна WCAG проверка на контраст. Внесете боја на текст и позадина и добијте однос на контраст, резултати за AA/AAA и најблиска боја што поминува.
• Пронаоѓач на име на боја Пронајдете го името на која било боја. Внесете HEX или RGB код и добијте ги 5-те најблиски имиња од над 30 000 именувани бои и најблиското CSS име.
• Симулатор на далтонизам Бесплатен симулатор на далтонизам. Погледнете која било слика со протанопија, деутеранопија, тританопија, нивните поблаги форми или ахроматопсија.
• Уредник на cubic-bezier Дизајнирајте CSS кривини за easing со уредник cubic-bezier што се влече, споредете ги со linear во анимација во живо и копирајте cubic-bezier() или linear().