Gradientkuler: glødende former til toppbilder og omslag

En gradientkule er en glødende kule laget med en radiell gradient: en lys kjerne, et bånd med mettet farge og en lang overgang til mørk bunn. Den har blitt populær på produktlanseringssider, i appenes toppfelt, på podkastgrafikk og albumomslag fordi én form gir designet et fokuspunkt, dybde og energi uten et eneste foto. Oppskriften er kort. Det som skiller en slående kule fra en uskarp klump, er bunnen bak, kjernefargen og plasseringen.

Tre typer gradientkuler

• Kule med myk glød: ingen kant, bare lys som brer seg ut fra mørket. Rolig og stemningsfull, god bak store oppsett.
• Belyst kule: en skarp rund kant med høylys på én side, som en planet eller glasskule. Kraftig og grafisk. Lysreglene finnes i gradientformer.
• Formørkelsesring: en mørk skive med lys som sprer seg rundt kanten. Dramatisk, nattlig og populær til musikk og teknologi.

Oppskrifter på gradientkuler

Hver oppskrift er én radial-gradient() du kan lime inn i CSS eller et designverktøy. Første stopp er kjernen, de midterste stoppene er den fargede kroppen, og det siste er bunnen. Flytter du bunnstoppet utover, blir gløden bredere.

Unngå en helt hvit kjerne. Hvitt med et skjær av kulens egen farge, som #faf5ff i en fiolett kule, holder sentrum lysende uten at det virker utbrent. Unngå også helt svart bunn: nesten svart med litt av kulens fargetone gjør at gløden hører hjemme i rommet.

Hvorfor kuler trenger mørk bunn

Glød er kontrast. På en hvit side ligner den samme fiolette kulen et blåmerke; på dyp blekkfarget bunn ser den ut som lys. Hvis merkevaren bruker lyse bakgrunner, velg en blek pastellkule med myk, bred overgang og godta at den blir et fargeskjær fremfor glød. Mørke gradientbakgrunner har bunner som passer alle kulene over.

Hvor du bør plassere en gradientkule

Kulen er det lyseste i bildet og trekker derfor blikket først. Det er nyttig hvis overskriften ligger ved siden av, og et problem hvis den ligger oppå. Plasser kulen høyt på én side, beskjær den ved kanten hvis den er stor, og hold ordene på rolig, mørk bunn. Bruk aldri en kule som glød bak tekst: det svekker kontrasten akkurat der du trenger den mest.

Et toppfelt med gradientkule i CSS

Den enkleste metoden er et radielt gradientlag på selve seksjonen. For en mykere, mer organisk glød bruker du et eget sirkelelement med kraftig uskarphet. Det lar deg også animere det sakte uten å tegne hele seksjonen på nytt.

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

Animer en gradientkule

En kule som driver noen prosent over bildet, eller puster ved å bli litt større og mindre, føles levende uten å distrahere fra ordene. Hold syklusen lang, mellom 10 og 20 sekunder, og la den starte og stoppe mykt så bevegelsen virker kontinuerlig. Til sosiale formater eksporterer du en kort løkke der siste bilderute samsvarer med den første: sømløs videoløkke forklarer hvordan. På nettet flytter du det uskarpe elementet med transform og slår av bevegelsen for besøkende som ber om redusert bevegelse.

Slik gir du gradientkulen et eget uttrykk

Kulen er nå så vanlig at en standardvariant ser ut som en mal. Et ekstra, svakere lys, et toneskifte i overgangen eller et lag med korn gir mer særpreg. Marks i Gradiently går lenger: hver er en levende bakgrunn med eget lys, materialer og bevegelse, kontrollert så ingen to ligner, og gjengitt i alle størrelser du designer i. Utforsk mørke Marks på Markedet og design gratis med enhver ledig Mark.