Генератор градиентных обоев

Далее

Мягкие трёхцветные градиенты с сильным размытием, это фоновый стиль почти каждой лендинговой страницы SaaS и большинства обоев для рабочего стола, выпущенных за последние четыре года. Этот инструмент смешивает три цвета в шестнадцатеричном формате с регулируемым углом и гауссовым размытием и экспортирует результат в разрешении для рабочего стола, телефона или фона Zoom.

Как создать градиентные обои

  1. 1

    Выберите три цвета

    Задайте шестнадцатеричные значения напрямую или нажмите «Случайно», чтобы получить неожиданную палитру.

  2. 2

    Задайте угол

    0–360°. 135°, это диагональ «заката», 90°, боковое смешение в стиле «рассвета».

  3. 3

    Настройте размытие

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

  4. 4

    Экспортируйте изображение

    Скачайте в разрешении, которое подходит вашему дисплею или телефону.

Рекомендуемые размеры вывода

Назначение Разрешение
Рабочий стол 4K 3840 × 2160
Рабочий стол 1440p 2560 × 1440
Рабочий стол 1080p 1920 × 1080
iPhone 15/16 1179 × 2556
Android (современный) 1080 × 2400
Виртуальный фон Zoom 1920 × 1080

Подсказки по палитре, которые всегда работают

  • Дополнительная пара + нейтральный: синий, оранжевый, бежевый.
  • Аналоговое трио: выберите три оттенка в пределах 60° на цветовом круге, фиолетовый, пурпурный, розовый.
  • Тепло-холодный контраст: один тёплый (персиковый, красный), один холодный (бирюзовый, тёмно-синий) и один нейтральный (кремовый).
  • Монохром: один оттенок в трёх значениях яркости создаёт сдержанную, цельную по настроению стену.

Почему размытие важно

Градиент из трёх точек без размытия показывает чёткие границы в точках смены цвета (так называемый «эффект радуги»). filter: blur() в 60–100 px на большом холсте сглаживает переходы в мягкие цветовые заливки, напоминающие обои macOS Big Sur или iOS 16.

Живой предпросмотр CSS

background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);

Если вы предпочитаете чёткий градиент без размытия, уменьшите значение фильтра до 0 и рассмотрите переход на интерполяцию in oklch для перцептивно равномерного смешивания.

Часто задаваемые вопросы

Нет. Генератор рисует градиент на холсте большего размера, чем итоговое изображение, применяет размытие, а затем внутренне обрезает до целевого размера, поэтому пиксели по краям никогда не бывают прозрачными. Скачанные обои сохраняют чистые края при любой степени размытия.

Этот генератор использует три цвета. Чем больше цветов, тем сильнее изображение напоминает заставку; три, оптимальный выбор для спокойных обоев.

Не совсем. У телефона более вытянутые пропорции, чем у рабочего стола, поэтому диагональный угол воспринимается иначе. Просматривайте изображение в каждом целевом размере и корректируйте угол, если какой-то из вариантов выглядит неудачно.

Нет. Холст рисуется локально, и браузер покидает только та загрузка, которую вы запускаете сами.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Конвертер CMYK в RGB

Преобразуйте проценты CMYK в приблизительные значения RGB и Hex для быстрого экранного предпросмотра по стандартной формуле.

Шпаргалка по Markdown

Практический справочник Markdown с настоящим предпросмотром и готовыми для копирования примерами заголовков, списков, таблиц, кода, ссылок, изображений и синтаксиса GFM.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Инструмент доступен на других языках