# Gradientklot: glödande sfärer för hero-ytor och omslag

[Canonical HTML page](https://gradiently.design/sv/guide/gradient-orb)

En enda glödande sfär på en mörk grund kan bära en hel landningssida eller ett albumomslag. Det ser enkelt ut och är lätt att få fel. Här är recepten och placeringsreglerna.

## The short version

- Ett gradientklot är en glödande sfär gjord av en radiell gradient, oftast en klar kärna som tonar via en mättad färg ut i en mörk grund.
- Klot finns i tre vanliga stilar: ett mjukt sken utan kant, en upplyst sfär med skarp kant och en förmörkelsering med mörk mitt.
- Ett klot glöder övertygande bara på en mörk eller djupt färgad grund, eftersom sken är kontrast mot omgivningen.
- Placera klotet bort från rubriken, oftast högt och åt ena sidan, och låt orden sitta på den lugna grunden.
- I CSS är ett klot ett lager med radiell gradient eller ett suddigt cirkelformat element placerat bakom innehållet.

Ett **gradientklot** är en glödande sfär gjord med en radiell gradient: en klar kärna, ett band av mättad färg och en lång tonavklingning in i en mörk grund. Det har blivit en favorit för produktlanseringssidor, app-hero-ytor, poddgrafik och albumomslag eftersom en enda form ger en design en tyngdpunkt, djup och en känsla av energi utan ett enda foto. Receptet är kort. Det som skiljer ett slående klot från en suddig klump är grunden bakom det, kärnans färg och var du placerar det.

## Tre sorters gradientklot

- **Mjukt skenklot:** ingen kant alls, bara ljus som blommar ut ur mörkret. Lugnt, atmosfäriskt, bra bakom stora layouter.
- **Upplyst sfär:** en skarp rund kant med en högdager på ena sidan, som läses som en planet eller en glaskula. Kraftfullt och grafiskt. Ljusreglerna finns i [gradientformer](https://gradiently.design/sv/guide/gradient-shapes).
- **Förmörkelsering:** en mörk skiva med ljus som rinner runt kanten. Dramatiskt, nattligt, populärt för musik och tech.

## Recept på gradientklot

Varje recept är en enda `radial-gradient()` som du kan klistra in i CSS eller ett designverktyg. Det första stoppet är kärnan, de mellersta stoppen är den färgade kroppen och det sista stoppet är grunden. Att skjuta grundstoppet längre ut gör skenet bredare.

- Violett sken: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Cyansken: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Glödsken: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Smaragdsken: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Förmörkelsering: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Iriserande sken: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Sex klot på mörka grunder. Det irisernade skiftar nyans när det tonar ut, rosa till violett till blått, vilket läses som en glansig yta.

Undvik en helvit kärna. Ett vitt som är tonat med klotets egen färg, som `#faf5ff` i ett violett klot, håller mitten lysande utan att se utbränd ut. Undvik också en helsvart grund: ett nästan svart med en gnutta av klotets nyans får skenet att kännas som att det hör hemma i rummet.

## Varför klot behöver en mörk grund

Sken är kontrast. På en vit sida ser samma violetta klot ut som ett blåmärke, på en djup bläckgrund ser det ut som ljus. Om ditt varumärke lever på ljusa bakgrunder, använd ett blekt pastellklot med en mjuk, bred avklingning och acceptera att det läses som ett färgblomster i stället för ett sken. [Mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) har grunder som passar till varje klot ovan.

- Bläckviolett grund: #0b0a1a
- Bläckmarin grund: #020617
- Bläckröd grund: #0c0507
- Bläckgrön grund: #010805

Fyra nästan svarta toner, var och en tonad mot ett klot. Matcha grunden mot klotet så ser skenet naturligt ut.

## Var du placerar ett gradientklot

Ett klot är det klaraste i bilden, så det drar blicken före allt annat. Det är en gåva om rubriken sitter bredvid det och ett problem om rubriken sitter ovanpå. Lägg klotet högt och åt ena sidan, beskär det vid kanten om det är stort och håll orden på lugn, mörk grund. Använd aldrig ett klot som sken bakom text: det sänker kontrasten precis där du behöver den mest.

- Webbplats-hero 1920×1080: 1920 × 1080
- Instagraminlägg 1080×1350: 1080 × 1350
- Spellistomslag 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

På en bred hero, lägg klotet på sidan mitt emot rubriken. På höga format, lägg det i översta tredjedelen med orden under.

Ett kvadratiskt poddomslag med ett glödande violett ljus högt i bilden och programmets titel under på mörk grund

Ett poddomslag i 3000×3000. Ljuset sitter ovanför titeln, aldrig under den.

En bred produktlanseringsbanner med rubriken till vänster och ett klart glödande område till höger

En lanserings-hero i 1920×1080, med orden till vänster och det klaraste området till höger.

## En hero med gradientklot i CSS

Den enklaste metoden är ett lager med radiell gradient på själva sektionen. För ett mjukare, mer organiskt sken, använd ett separat cirkelformat element med kraftig oskärpa, vilket också låter dig animera det långsamt utan att måla om hela sektionen.

```css
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}
```

Ett violett klot uppe till höger på en bläckgrund, med ett svagt cyanfärgat ljus som sipprar in från nedre vänstra hörnet. Innehållet ligger ovanpå båda.

> **Stora oskärpor kostar något** En stor `filter: blur()` på ett rörligt element kan tappa bildrutor på äldre mobiler. Animera bara `transform`, håll oskärperadien måttlig och läs [CSS-gradienters prestanda](https://gradiently.design/sv/guide/css-gradient-performance) innan du släpper.

## Animera ett gradientklot

Ett klot som driver några procent över bilden, eller andas något större och mindre, känns levande utan att distrahera från orden. Håll cykeln lång, någonstans mellan 10 och 20 sekunder, och mjuka upp start och slut så att rörelsen aldrig verkar börja eller sluta. I sociala format, exportera det som en kort loop vars sista bildruta matchar den första: [sömlös loopvideo](https://gradiently.design/sv/guide/seamless-loop-video) förklarar hur. På webben, flytta det suddiga elementet med `transform` och stäng av rörelsen för besökare som ber om [minskad rörelse](https://gradiently.design/sv/guide/reduced-motion).

## Så får du ett gradientklot att se originellt ut

### Generiskt klot

- Lila till blått, centrerat, på svart
- Helvit kärna som klipps
- Placerat bakom rubriken
- Helt jämnt, bandning i avklingningen

### Genomtänkt klot

- En varumärkesfärg med ett nyansskifte i avklingningen
- En tonad kärna som förblir lysande
- Förskjutet, beskuret, med orden på lugn grund
- Fint korn över avklingningen för att hålla den mjuk

Klotet är numera så vanligt att ett standardklot ser ut som en mall. Ett andra, svagare ljus, ett nyansskifte i avklingningen eller ett lager [korn](https://gradiently.design/sv/guide/grainy-gradients) för det alla mot något igenkännbart. Gradiently-Marks går längre: var och en är en levande bakgrund med eget ljus, egna material och egen rörelse, kontrollerad så att inga två ser likadana ut, och den renderas i varje storlek du designar i. Bläddra bland mörka Marks i Marknaden och designa med vilken osäkrad som helst gratis.

## FAQ

### Hur gör jag ett gradientklot?

Använd en radiell gradient med en tonad vit kärna, ett mättat färgband och en mörk grund, till exempel `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Vilken bakgrund fungerar bäst bakom ett gradientklot?

Ett nästan svart som är tonat mot klotets färg. Sken läses bara som sken mot en mörk omgivning.

### Kan jag lägga text ovanpå ett gradientklot?

Undvik det. Klotet är den klaraste delen av bilden, så text över det tappar kontrast. Placera klotet åt ena sidan och håll orden på lugn grund.

### Hur gör jag ett suddigt klot i CSS?

Skapa ett cirkelformat element med en radiell gradient som tonar till genomskinlig och lägg sedan på `filter: blur()`. Placera det absolut bakom innehållet.