CSS Gradient Generator

Що таке CSS-градієнт?

Генератор CSS-градієнтів — це візуальний інструмент, який допомагає створювати плавні переходи кольорів без ручного написання синтаксису градієнтів. У CSS градієнт — це плавний перехід між двома або більше кольорами, який браузер відтворює безпосередньо без жодного файлу зображення. Специфікація CSS Image Module Level 4 визначає функції градієнтів як різновид значення зображення, тобто їх можна застосовувати скрізь, де приймається 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 vs Radial vs 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%)"
}

Поширені запитання