Генератор CSS-фонових візерунків

Що це за інструмент?

CSS може малювати повторювані візерунки без жодних файлів зображень за допомогою градієнтів — radial-gradient() і linear-gradient() — як background-image, у поєднанні з background-size, меншим за сам елемент, щоб градієнт плиткою повторювався. Горошок використовує повторюваний radial-gradient, смуги й шахівниця — повторювані або накладені linear-gradient(), а лінії сітки — два перехресні linear-gradient().

Цей інструмент будує ці оголошення градієнтів за вас. Оберіть тип візерунка, налаштуйте колір візерунка, колір фону й відстані, спостерігайте за оновленням живого перегляду — а потім скопіюйте точний CSS для background-image і background-size.

Джерело: CSS Images Module Level 3, W3C — визначає repeating-linear-gradient() і repeating-radial-gradient(), функції, на яких побудовані ці візерунки.

Навіщо його використовувати?

• Жодних файлів зображень, жодних HTTP-запитів — візерунок є чистим CSS і рендериться миттєво за будь-якої роздільної здатності, включно з retina/high-DPI екранами.
• Повністю налаштовувані колір і відстані без ручного написання синтаксису градієнтів чи обчислення математики плиткування.
• Живий перегляд показує точний повторюваний візерунок ще до копіювання.
• Чітко масштабується, оскільки це векторна математика, а не растрове зображення — жодного розмиття при зміні розміру елемента.
• Працює повністю у вашому браузері — нічого з того, що ви налаштовуєте, нікуди не завантажується.
• Безкоштовно, без реєстрації, працює на мобільних.

Як користуватися

1. Оберіть тип візерунка: горошок, діагональні смуги, шахівниця чи лінії сітки.
2. Оберіть колір візерунка й колір фону, що видно між/за фігурами візерунка.
3. Налаштуйте повзунок розміру, щоб зробити крапки, смуги чи клітинки сітки більшими чи меншими — це також визначає, наскільки щільно повторюється візерунок.
4. Скопіюйте згенерований CSS і вставте його як background-image (а також background-size/background-position, де показано) будь-якого елемента.

Приклад

Введення

Візерунок: горошок · Колір: синій · Фон: білий · Розмір: 24px

Результат

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Класичний світлий візерунок горошок, який часто використовують як ненав'язливий фон секції чи текстуру картки.

Як побудований кожен візерунок

• Горошок: radial-gradient() малює одне маленьке заповнене коло, а потім background-size повторює його як плиткову сітку з крапок.
• Діагональні смуги: repeating-linear-gradient() під кутом 45 градусів чергує колір візерунка й колір фону через фіксований інтервал.
• Шахівниця: два перехресні шари linear-gradient() під кутом 45 градусів, зміщені один відносно одного на половину плитки, утворюють чергування світлих і темних квадратів.
• Лінії сітки: дві тонкі лінії linear-gradient() — одна горизонтальна, одна вертикальна — повторюються з обраним інтервалом, утворюючи сітку, подібну до міліметрового паперу.

Коли використовувати CSS-візерунки замість файлів зображень

CSS-градієнтний візерунок не має розміру файлу й не потребує HTTP-запиту, тож завантажується миттєво й ніколи не виглядає розмитим на екранах з високою щільністю пікселів, на відміну від растрової PNG-плитки для фону. Це ідеально для ненав'язливих текстур за текстом, роздільників секцій, ілюстрацій для порожніх станів чи карток-заглушок. Для складних ілюстративних чи фотографічних візерунків справжнє зображення все ще залишається правильним інструментом — CSS-градієнти найкраще підходять для простих, геометричних, повторюваних форм, як тут.

Поєднання з іншими CSS-ефектами

Візерунки добре працюють як фон за картками у стилі гласморфізму, оскільки для помітності розмиття потрібно щось із візуальною текстурою позаду. Вони також природно поєднуються із заокругленими кутами контейнера.

→ Генератор CSS Glassmorphism · Генератор border-radius

Часті запитання