CSS Gradient Generator

Co je CSS přechod?

CSS gradient generator je vizuální nástroj, který vám pomůže vytvořit plynulé přechody barev bez ručního psaní syntaxe přechodů. V CSS je přechod plynulý přechod mezi dvěma nebo více barvami, který prohlížeč vykresluje přímo bez jakéhokoli obrázkového souboru. Specifikace CSS Image Module Level 4 definuje funkce přechodů jako typ hodnoty obrázku, takže je lze použít kdekoli, kde je přijímána hodnota background-image, list-style-image nebo border-image. Protože prohlížeč rastruje přechody při vykreslování, škálují se do libovolného rozlišení a na obrazovkách s vysokou hustotou pixelů nezpůsobují rozmazané artefakty. Použití CSS gradient generatoru šetří čas a eliminuje dohady — barvy a pozice upravujete vizuálně a výsledné CSS pravidlo pak jednoduše zkopírujete.

CSS podporuje tři hlavní tvary přechodů: lineární (podél přímky), radiální (vycházející ze středového bodu) a konický (přechod kolem středového bodu). Každý tvar přijímá seznam zarážek barev, kde zadáváte barvu a volitelně pozici (procentuální hodnotu nebo délku). Prohlížeč interpoluje barvy mezi zarážkami ve výchozím nastavení v barevném prostoru sRGB, ačkoli CSS Color Level 4 umožňuje specifikovat jiné barevné prostory jako oklch a lab pro perceptuálně plynulejší přechody.

Přechody nahrazují pozadí na základě obrázků pro většinu dekorativních účelů na webu. Jediné CSS pravidlo produkuje to, co kdysi vyžadovalo export z Photoshopu a HTTP požadavek. Jsou nezávislé na rozlišení, nepotřebují žádnou síťovou šířku pásma nad rámec samotného CSS a lze je animovat nebo provádět přechod pomocí standardních CSS vlastností. Syntaxe přechodů je stabilní ve všech hlavních prohlížečích od roku 2013 a forma bez prefixů funguje v Chrome, Firefox, Safari a Edge bez záložních řešení.

Proč používat tento CSS Gradient Generator?

Psaní syntaxe přechodů ručně znamená odhadování pozic zarážek, kontrolu hodnot úhlů a opakované obnovování stránky pro zobrazení výsledku. Vizuální nástroj vám umožní vidět přechod při jeho tvorbě, upravovat zarážky přetažením a zkopírovat výsledné CSS, jakmile vypadá správně.

Případy použití CSS Gradient Generatoru

Přehled typů CSS přechodů

CSS definuje pět funkcí přechodů. Tři hlavní typy (lineární, radiální, konický) mají každý variantu s opakováním, která dláždí vzor. repeating-linear-gradient() a repeating-radial-gradient() jsou užitečné pro pruhovaná pozadí a soustředné kruhy. Všechny funkce přechodů přijímají zarážky barev v jakémkoli CSS barevném formátu: HEX, RGB, HSL, pojmenované barvy nebo oklch. Podpora ve všech pěti funkcích je prakticky univerzální v Chrome, Firefox, Safari a Edge — nejsou nutné žádné vendor prefixy.

Lineární vs. radiální vs. konické přechody

Každý typ přechodu mapuje barvy na geometrii odlišně. Výběr správného typu závisí na vizuálním efektu, který potřebujete, nikoli na kvalitativním rozdílu mezi nimi. Pro většinu pozadí stránek a oddělovačů sekcí je lineární přechod správnou volbou — je nejjednodušší na pochopení a nejpředvídatelnější u prvků různých velikostí. Radiální a konické přechody jsou vhodnější pro specifické vizuální efekty, kde je kruhová nebo rotační geometrie věcná, nikoli jen dekorativní.

Příklady kódu

Příklady generování a aplikování CSS přechodů programově v JavaScriptu, Pythonu, CSS a Go. Každý produkuje platné řetězce CSS přechodů, které lze použít přímo ve stylopisu nebo v inline stylech.

// 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%)"
}

Často kladené otázky