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

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.
• 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.

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 har grunder som passar till varje klot ovan.

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.

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.

.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;
}

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 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.

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

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 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.