Gradientkugler: glødende sfærer til heroes og covers

En gradientkugle er en glødende sfære lavet med en radial gradient: en klar kerne, et bånd af mættet farve og en lang overgang ud i en mørk bund. Den er blevet en favorit til lanceringssider, app-heroes, podcastgrafik og albumcovers, fordi én form giver et design et fokuspunkt, dybde og en følelse af energi uden et eneste foto. Opskriften er kort. Det, der skiller en slående kugle fra en sløret klat, er bunden bag den, farven på dens kerne, og hvor du placerer den.

Tre slags gradientkugler

• Blød glødekugle: ingen kant overhovedet, bare lys, der blomstrer ud af mørket. Rolig, atmosfærisk, god bag store layouts.
• Belyst sfære: en skarp, rund kant med et højlys på den ene side, som læses som en planet eller en glaskugle. Modig og grafisk. Reglerne for lys står i gradientformer.
• Formørkelsesring: en mørk skive med lys, der vælter ud rundt om kanten. Dramatisk, natlig, populær til musik og tech.

Opskrifter på gradientkugler

Hver opskrift er en enkelt radial-gradient(), du kan indsætte i CSS eller et designværktøj. Det første stop er kernen, de midterste stop er den farvede krop, og det sidste stop er bunden. Skubber du bundens stop længere ud, bliver gløden bredere.

Undgå en ren hvid kerne. En hvid tonet med kuglens egen farve, som #faf5ff i en violet kugle, holder midten lysende uden at se udbrændt ud. Undgå også en ren sort bund: en næsten sort med et strejf af kuglens farvetone får gløden til at føles, som om den hører hjemme i rummet.

Hvorfor kugler har brug for en mørk bund

Glød er kontrast. På en hvid side ligner den samme violette kugle et blåt mærke; på en dyb blækfarvet bund ligner den lys. Lever dit brand på lyse baggrunde, så brug en bleg pastelkugle med en blød, bred overgang, og acceptér, at den læses som en blomstring af farve frem for en glød. Mørke gradientbaggrunde har bunde, der passer godt til hver kugle ovenfor.

Hvor du placerer en gradientkugle

En kugle er det lyseste i billedet, så den trækker øjet før alt andet. Det er en gave, hvis din overskrift står ved siden af den, og et problem, hvis overskriften står oven på den. Placér kuglen højt og til den ene side, beskær den ved kanten, hvis den er stor, og hold ordene på en rolig, mørk bund. Brug aldrig en kugle som glød bag tekst: den sænker kontrasten præcis dér, hvor du har mest brug for den.

En hero med gradientkugle i CSS

Den enkleste metode er et radialt gradientlag på selve sektionen. Til en blødere, mere organisk glød bruger du et separat rundt element med kraftig sløring, som også lader dig animere det langsomt uden at gentegne hele 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;
}

Animation af en gradientkugle

En kugle, der driver et par procent hen over billedet, eller ånder en smule større og mindre, føles levende uden at tage opmærksomheden fra ordene. Hold cyklussen lang, et sted mellem 10 og 20 sekunder, og lad den accelerere og bremse blødt, så bevægelsen aldrig ser ud til at starte eller stoppe. Til sociale formater eksporterer du den som et kort loop, hvor det sidste billede matcher det første: sømløs loopvideo forklarer hvordan. På nettet flytter du det slørede element med transform og slår bevægelsen fra for besøgende, der beder om reduceret bevægelse.

Sådan får du en gradientkugle til at se original ud

Kuglen er nu så almindelig, at en standardudgave ligner en skabelon. Et andet, svagere lys, et skift i farvetone i overgangen eller et lag korn flytter den alle mod noget genkendeligt. Marks fra Gradiently går længere: hver er en levende baggrund med sit eget lys, sine egne materialer og sin egen bevægelse, kontrolleret, så ingen to ligner hinanden, og den gengives i alle størrelser, du designer i. Gennemse mørke Marks på Markedet, og design gratis med enhver, ingen har sikret sig.