CSS Gradient Generator

Что такое CSS-градиент?

Генератор CSS-градиентов — это визуальный инструмент, который помогает создавать плавные цветовые переходы без ручного написания синтаксиса градиента. В CSS градиент — это плавный переход между двумя или более цветами, который браузер отрисовывает напрямую, без использования изображений. Спецификация CSS Image Module Level 4 определяет функции градиентов как разновидность значения типа image, то есть их можно использовать везде, где допустимы значения background-image, list-style-image или border-image. Поскольку браузер растеризует градиенты во время отрисовки, они масштабируются до любого разрешения и не дают размытых артефактов на экранах с высокой плотностью пикселей. Использование генератора CSS-градиентов экономит время и избавляет от необходимости угадывать параметры — вы настраиваете цвета и позиции визуально, а затем копируете готовое CSS-правило.

CSS поддерживает три основные формы градиентов: линейные (вдоль прямой линии), радиальные (от центральной точки наружу) и конические (по кругу вокруг центра). Каждая форма принимает список цветовых точек, где указывается цвет и, при необходимости, позиция (в процентах или единицах длины). По умолчанию браузер интерполирует цвета между точками в цветовом пространстве sRGB, однако CSS Color Level 4 позволяет задавать другие цветовые пространства — oklch и lab — для более точных с точки зрения восприятия переходов.

Градиенты заменили фоновые изображения для большинства декоративных задач в вебе. Одно CSS-правило даёт то, что раньше требовало экспорта из Photoshop и лишнего HTTP-запроса. Они не зависят от разрешения, не требуют сетевого трафика сверх самого CSS и могут анимироваться стандартными CSS-свойствами. Синтаксис градиентов стабилен во всех основных браузерах с 2013 года, и форма без вендорных префиксов работает в Chrome, Firefox, Safari и Edge без запасных вариантов.

Зачем использовать этот генератор CSS-градиентов?

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

Сценарии использования генератора CSS-градиентов

Справочник по типам CSS-градиентов

В CSS определены пять функций градиентов. Три основных типа (linear, radial, conic) имеют повторяющийся вариант, который тайлит паттерн. repeating-linear-gradient() и repeating-radial-gradient() полезны для полосатых фонов и концентрических колец. Все функции градиентов принимают цветовые точки в любом формате CSS: HEX, RGB, HSL, именованные цвета или oklch. Поддержка всех пяти функций во всех основных браузерах — Chrome, Firefox, Safari и Edge — является де-факто универсальной, вендорные префиксы не требуются.

Сравнение: linear, radial и conic градиенты

Каждый тип градиента по-своему отображает цвета на геометрию. Выбор правильного типа зависит от нужного визуального эффекта, а не от качественного различия между ними. Для большинства фонов страниц и разделителей секций линейный градиент — правильный вариант по умолчанию: он проще всего поддаётся осмыслению и наиболее предсказуем для элементов разного размера. Радиальные и конические градиенты лучше приберечь для конкретных визуальных эффектов, где круговая или вращательная геометрия имеет смысловое, а не декоративное значение.

Примеры кода

Примеры создания и применения CSS-градиентов программно на JavaScript, Python, CSS и Go. Каждый пример производит валидные строки CSS-градиентов, которые можно использовать напрямую в таблицах стилей или инлайн-стилях.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

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