Конические градиенты (conic-gradient): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

На этой странице собраны упражнения для отработки навыков использования конических градиентов (`conic-gradient`) в CSS. Конические градиенты позволяют создавать круговые узоры, диаграммы и другие интересные визуальные эффекты, где цвета плавно переходят вокруг центральной точки. Задания построены от простого к сложному: начиная с создания базового градиента, добавления цветов, указания начального угла и центра, и заканчивая созданием повторяющихся узоров и секторных диаграмм. Каждое задание включает HTML-разметку и CSS-стили с пропусками, которые вам предстоит заполнить, чтобы достичь нужного результата. После ввода кода вы сможете сразу увидеть итог в окне предпросмотра.

Список тем

Создание простого конического градиента

Начнем с основ. Ваша задача — создать простой конический градиент, переходящий от красного к синему цвету. Заполните пропуск, чтобы указать правильную функцию для создания конического градиента.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* Делаем круглым для наглядности */
  background: input1(red, blue);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%; /* Делаем круглым для наглядности */
  background: input1(red, blue);
}

HTML

<div class="gradient-box"></div>

Для создания конического градиента используется функция `conic-gradient()`. Укажите эту функцию в качестве значения свойства `background`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Градиент с тремя цветами

Теперь добавим еще один цвет. Создайте конический градиент, который начинается с красного, переходит в желтый и заканчивается синим. Заполните пропуск, чтобы добавить желтый цвет между красным и синим.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red input1 yellow, blue);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red input1 yellow, blue);
}

HTML

<div class="gradient-box"></div>

Чтобы добавить цвет в градиент, просто перечислите его через запятую в функции `conic-gradient()`. Добавьте `yellow` между `red` и `blue`, не забывая про запятую.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Указание начального угла

По умолчанию градиент начинается сверху (0 градусов). Измените начальный угол градиента так, чтобы он начинался справа (90 градусов). Заполните пропуск, чтобы указать ключевое слово для задания начального угла.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(input1 90deg, red, blue);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(input1 90deg, red, blue);
}

HTML

<div class="gradient-box"></div>

Для задания начального угла используется ключевое слово `from`, за которым следует значение угла (например, `90deg`). Вставьте `from` перед указанием угла.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Указание центра градиента

Центр градиента можно смещать. По умолчанию он находится в центре элемента (`center center` или `50% 50%`). Сместите центр градиента в левый верхний угол. Заполните пропуск, чтобы указать ключевое слово для задания позиции центра.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  /* Убрали border-radius для наглядности смещения */
  background: conic-gradient(input1 top left, red, yellow, blue);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  /* Убрали border-radius для наглядности смещения */
  background: conic-gradient(input1 top left, red, yellow, blue);
}

HTML

<div class="gradient-box"></div>

Для задания позиции центра используется ключевое слово `at`, за которым следует позиция (например, `top left`, `25% 75%`). Вставьте `at` перед указанием позиции.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание позиций цветов (углы)

Можно точно указать, где должны начинаться и заканчиваться цвета, используя углы. Создайте градиент, где красный цвет занимает сектор от 0 до 90 градусов, а синий — от 90 до 180 градусов. Заполните пропуски, чтобы указать единицу измерения для углов.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red 0input1, red 90input1, blue 90input1, blue 180input1);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red 0input1, red 90input1, blue 90input1, blue 180input1);
}

HTML

<div class="gradient-box"></div>

Углы в градиентах обычно указываются в градусах (`deg`), радианах (`rad`), градах (`grad`) или оборотах (`turn`). В данном случае наиболее подходит `deg`. Укажите `deg` после каждого числового значения угла.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Задание позиций цветов (проценты)

Позиции цветов можно задавать и в процентах. Создайте градиент, где красный цвет занимает первые 25%, а синий — сектор от 25% до 75%. Заполните пропуски, чтобы указать единицу измерения для процентов.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red 0input1, red 25input1, blue 25input1, blue 75input1);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red 0input1, red 25input1, blue 25input1, blue 75input1);
}

HTML

<div class="gradient-box"></div>

Для указания позиций в процентах используется знак процента (`%`) после числового значения. Укажите `%` после каждого числа.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Создание секторной диаграммы (жесткие переходы)

Конические градиенты отлично подходят для создания секторных диаграмм. Чтобы создать резкие границы между цветами, укажите одинаковую позицию для конца одного цвета и начала следующего. Создайте диаграмму из трех секторов: красный (0-120deg), желтый (120-240deg), синий (240-360deg). Заполните пропуски нужным разделителем.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red 0deg input1 red 120deg,
    yellow 120deg input1 yellow 240deg,
    blue 240deg input1 blue 360deg
  );
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    red 0deg input1 red 120deg,
    yellow 120deg input1 yellow 240deg,
    blue 240deg input1 blue 360deg
  );
}

HTML

<div class="gradient-box"></div>

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

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Повторяющийся конический градиент

Иногда нужно создать повторяющийся узор. Для этого существует специальная функция. Создайте повторяющийся градиент, где сектор от красного к синему повторяется каждые 90 градусов. Заполните пропуск, указав правильную функцию.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: input1(red 0deg, red 45deg, blue 45deg, blue 90deg);
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: input1(red 0deg, red 45deg, blue 45deg, blue 90deg);
}

HTML

<div class="gradient-box"></div>

Для создания повторяющихся конических градиентов используется функция `repeating-conic-gradient()`. Укажите эту функцию вместо `conic-gradient()`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Повторяющийся градиент с указанием угла и центра

Функция `repeating-conic-gradient` также поддерживает указание начального угла и центра. Создайте повторяющийся градиент (красный/синий каждые 45 градусов), который начинается с угла 45 градусов и имеет центр в позиции 25% 75%. Заполните пропуски ключевыми словами `from` и `at`.

CSS

.gradient-box {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(
    input1 45deg input2 25% 75%,
    red 0deg, red 22.5deg,
    blue 22.5deg, blue 45deg
  );
}

                     .gradient-box {
  width: 200px;
  height: 200px;
  background: repeating-conic-gradient(
    input1 45deg input2 25% 75%,
    red 0deg, red 22.5deg,
    blue 22.5deg, blue 45deg
  );
}

HTML

<div class="gradient-box"></div>

Как и в `conic-gradient`, используйте `from` для указания начального угла и `at` для указания центра. Порядок: `from [угол] at [позиция]`. Убедитесь, что они стоят в правильных местах перед списком цветов.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку