Generator Gradientów CSS

Czym jest gradient CSS?

Generator gradientów CSS to wizualne narzędzie, które pomaga tworzyć płynne przejścia kolorów bez ręcznego pisania składni gradientu. W CSS gradient to płynne przejście między dwoma lub więcej kolorami, renderowane bezpośrednio przez przeglądarkę bez żadnego pliku graficznego. Specyfikacja CSS Image Module Level 4 definiuje funkcje gradientu jako typ wartości obrazu, co oznacza, że mogą pojawiać się wszędzie tam, gdzie akceptowana jest wartość background-image, list-style-image lub border-image. Ponieważ przeglądarka rasteryzuje gradienty w czasie renderowania, skalują się do dowolnej rozdzielczości i nigdy nie tworzą rozmytych artefaktów na ekranach o wysokiej gęstości pikseli. Korzystanie z generatora gradientów CSS oszczędza czas i eliminuje zgadywanie — dostosowujesz kolory i pozycje wizualnie, a następnie kopiujesz gotową regułę CSS.

CSS obsługuje trzy główne kształty gradientu: liniowy (wzdłuż prostej linii), radialny (promieniście od punktu centralnego) i stożkowy (obrót wokół punktu centralnego). Każdy kształt przyjmuje listę punktów zatrzymania kolorów, w których określasz kolor i opcjonalnie pozycję (wartość procentowa lub długość). Przeglądarka interpoluje kolory między punktami zatrzymania przy użyciu domyślnej przestrzeni barw sRGB, choć CSS Color Level 4 umożliwia określanie innych przestrzeni barw, takich jak oklch i lab, dla percepcyjnie płynniejszych przejść.

Gradienty zastępują tła oparte na obrazach w większości celów dekoracyjnych w internecie. Pojedyncza reguła CSS daje efekt, który kiedyś wymagał eksportu z Photoshopa i żądania HTTP. Są niezależne od rozdzielczości, nie wymagają żadnej przepustowości sieciowej poza samym CSS i mogą być animowane lub poddawane przejściom za pomocą standardowych właściwości CSS. Składnia gradientu jest stabilna we wszystkich głównych przeglądarkach od 2013 roku, a forma bez prefiksu działa w Chrome, Firefox, Safari i Edge bez żadnych zapasowych deklaracji.

Dlaczego warto używać tego generatora gradientów CSS?

Ręczne pisanie składni gradientu oznacza zgadywanie pozycji punktów zatrzymania, sprawdzanie wartości kątów i wielokrotne odświeżanie, aby zobaczyć efekt. Wizualny kreator pozwala oglądać gradient podczas jego tworzenia, przesuwać punkty zatrzymania metodą przeciągnij i upuść, a następnie skopiować gotowy CSS.

Zastosowania generatora gradientów CSS

Typy gradientów CSS — tabela referencyjna

CSS definiuje pięć funkcji gradientu. Trzy podstawowe typy (linear, radial, conic) mają każdy wariant powtarzający, który kafelkuje wzorzec. repeating-linear-gradient() i repeating-radial-gradient() są przydatne do pasiastych teł i koncentrycznych pierścieni. Wszystkie funkcje gradientu akceptują punkty zatrzymania w dowolnym formacie kolorów CSS: HEX, RGB, HSL, nazwy kolorów lub oklch. Obsługa wszystkich pięciu funkcji w przeglądarkach jest praktycznie powszechna w Chrome, Firefox, Safari i Edge — prefiksy dostawców nie są wymagane.

Gradienty liniowe vs radialne vs stożkowe

Każdy typ gradientu mapuje kolory na geometrię w inny sposób. Wybór właściwego typu zależy od potrzebnego efektu wizualnego, a nie od różnicy jakości między nimi. W przypadku większości teł stron i separatorów sekcji gradient liniowy jest właściwym domyślnym wyborem — jest najprostszy w rozumowaniu i najbardziej przewidywalny w elementach o różnych rozmiarach. Gradienty radialne i stożkowe najlepiej zarezerwować dla konkretnych efektów wizualnych, gdzie okrągła lub obrotowa geometria jest znacząca, a nie tylko dekoracyjna.

Przykłady kodu

Przykłady programowego generowania i stosowania gradientów CSS w JavaScript, Python, CSS i Go. Każdy z nich tworzy poprawne ciągi gradientu CSS, których możesz używać bezpośrednio w arkuszach stylów lub stylach wbudowanych.

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

Najczęściej zadawane pytania