CSS Gradient Generator

Vad är en CSS-gradient?

En CSS gradient generator är ett visuellt verktyg som hjälper dig att bygga mjuka färgövergångar utan att skriva gradientsyntax för hand. I CSS är en gradient en mjuk övergång mellan två eller fler färger, renderad direkt av webbläsaren utan någon bildfil. CSS Image Module Level 4-specifikationen definierar gradientfunktioner som en typ av bildvärde, vilket innebär att de kan användas överallt där background-image, list-style-image eller border-image är giltiga. Eftersom webbläsaren rastrerar gradienter vid renderingstillfället skalas de till vilken upplösning som helst och ger aldrig suddiga artefakter på high-DPI-skärmar. Att använda en CSS gradient generator sparar tid och minskar gissandet — du justerar färger och positioner visuellt och kopierar sedan den färdiga CSS-regeln.

CSS stöder tre huvudsakliga gradientformer: linjär (längs en rät linje), radiell (utåt från en mittpunkt) och konisk (en svepning runt en mittpunkt). Varje form tar emot en lista med färgstoppar, där du anger färgen och valfritt en position (procentandel eller längd). Webbläsaren interpolerar färger mellan stopparna med färgrymden sRGB som standard, men CSS Color Level 4 tillåter att man anger andra färgrymder som oklch och lab för perceptuellt mjukare övergångar.

Gradienter ersätter bildbaserade bakgrunder för de flesta dekorativa ändamål på webben. En enda CSS-regel producerar det som tidigare krävde en Photoshop-export och en HTTP-förfrågan. De är upplösningsoberoende, kräver noll nätverksbandbredd utöver själva CSS:en och kan animeras eller övergås med vanliga CSS-egenskaper. Gradientsyntaxen har varit stabil i alla större webbläsare sedan 2013, och den oprefikerade formen fungerar i Chrome, Firefox, Safari och Edge utan reservalternativ.

Varför använda denna CSS Gradient Generator?

Att skriva gradientsyntax för hand innebär att gissa på stopppositioner, kontrollera vinkelsvärden och upprepade gånger uppdatera webbläsaren för att se resultatet. En visuell byggare låter dig se gradienten medan du skapar den, justera stopp genom att dra och kopiera den slutliga CSS:en när den ser rätt ut.

Användningsfall för CSS Gradient Generator

Referens för CSS-gradienttyper

CSS definierar fem gradientfunktioner. De tre primärtyperna (linjär, radiell, konisk) har var sin upprepande variant som kakellägger mönstret. repeating-linear-gradient() och repeating-radial-gradient() är användbara för randiga bakgrunder och koncentriska ringar. Alla gradientfunktioner accepterar färgstoppar i vilket CSS-färgformat som helst: HEX, RGB, HSL, namngivna färger eller oklch. Webbläsarstödet för alla fem funktionerna är i praktiken universellt i Chrome, Firefox, Safari och Edge — inga leverantörsprefix krävs.

Linjär vs radiell vs konisk gradient

Varje gradienttyp mappar färger till geometri på olika sätt. Att välja rätt typ beror på den visuella effekt du behöver, inte på en kvalitetsskillnad mellan dem. För de flesta sidbakgrunder och sektionsavdelare är en linjär gradient rätt standardval — den är enklast att resonera kring och mest förutsägbar för element av varierande storlekar. Radiella och koniska gradienter passar bättre för specifika visuella effekter där den cirkulära eller rotationsmässiga geometrin är meningsfull snarare än dekorativ.

Kodexempel

Exempel på att generera och tillämpa CSS-gradienter programmatiskt i JavaScript, Python, CSS och Go. Varje exempel producerar giltiga CSS-gradientsträngar som du kan använda direkt i stilmallar eller inline-stilar.

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

Vanliga frågor