Galaxy-kleurverloop: kosmische codes op diepe ruimte

Een galaxy-kleurverloop is zachte nevelkleur die uit een bijna zwarte ondergrond gloeit: violette, magenta, turquoise of gloeiende wolken die vervagen in diepe ruimte, meestal met een stuifje kleine sterren erbovenop. Het geheim is verhouding. Echte foto’s van de ruimte zijn voornamelijk donker, en de kleur zit in een of twee wolken en niet over het hele beeld. Hieronder staan kopieerbare codes voor de belangrijkste nevelfamilies en een compleet gelaagd sterrenveld in CSS.

Wat een kleurverloop op een sterrenstelsel laat lijken

Een overgang van paars naar blauw is gewoon een paars kleurverloop. Het gaat als ruimte lezen zodra het de vier dingen heeft die je oog van sterrenkundige beelden verwacht:

• Een ondergrond die bijna zwart is, licht getint met blauw of violet in plaats van neutraal.
• Nevelwolken die vanuit een heldere kern gloeien en ongelijk uitvloeien, een klus voor radiale kleurverlopen.
• Een helderdere kern in de helderste wolk: een bleek roze, lila of crème dat bijna wit is.
• Sterren: veel kleine puntjes wit en lichtblauw, een paar iets grotere, zonder patroon verspreid.

Codes voor een galaxy-kleurverloop

Elk hiervan is één radiaal kleurverloop dat je in een ontwerptool of stylesheet plakt. Ze wegen bewust naar het donkere uiteinde. Het violette is het klassieke ruimtekleurverloop, turquoise voelt kouder en wetenschappelijker, en gloeiend voelt als een stervende ster of een scifi-poster.

Wil je iets dichter bij huis, een hemel met sterren en een maan in plaats van diepe ruimte, dan zijn de codes van kleurverloop sterrenhemel zachter. Voor gordijnen van groen en violet licht, zie aurora-kleurverlopen.

Bouw een galaxy-achtergrond in CSS, laag voor laag

Eén kleurverloop geeft je een nevel. Een sterrenstelsel ontstaat door er meerdere te stapelen, wat CSS goed kan omdat background-image een lijst accepteert. De eerst genoemde laag wordt bovenop geschilderd.

1. 1

   Leg de ondergrond

   Een breed radiaal kleurverloop van leegte-indigo in het midden naar diepe ruimte aan de randen, zodat het beeld nooit plat oogt.

2. 2

   Voeg één hoofdnevel toe

   Een gekleurd radiaal kleurverloop dat vervaagt naar transparent, naast het midden geplaatst, ongeveer waar een derdelijn zou kruisen.

3. 3

   Voeg een tweede, kleinere wolk toe

   Een andere tint, ver van de eerste, met lagere dekking. Het voegt diepte toe zonder om aandacht te vechten.

4. 4

   Strooi sterren

   Kleine radiale stipjes, tegelsgewijs herhaald in twee of drie verschillende groottes, zodat de herhalingen nooit tot een zichtbaar raster uitlijnen.

5. 5

   Rond af met korrel

   Een vage ruislaag over alles verbergt banding in de donkere delen en geeft het een fotografisch gevoel.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

De radiale syntaxis, inclusief maten als ellipse 60% 25% en stoppposities, staat in CSS radiaal kleurverloop. Voor de korrellaag heeft CSS-ruistextuur een kopieerbare aanpak met een SVG-filter.

Een galaxy-kleurverloop niet modderig laten worden

De meest voorkomende fout is een sterrenstelsel dat op een blauwe plek lijkt: kleuren die overlappen tot bruin of grijs, en kleur zo gelijkmatig verspreid dat niets gloeit. Gloed heeft duisternis eromheen nodig. De oplossing is bijna altijd minder kleur, zorgvuldiger geplaatst. De kleurtheorie erachter staat in modderige kleurverlopen.

Woorden op een galaxy-achtergrond zetten

Galaxy-achtergronden passen bij witte of heel lichte letters, en het best op het donkere deel van het beeld, niet op de heldere nevelkern. Zet de kop in de lege ruimte en laat de wolk aan één kant staan. Sterren achter kleine tekst zijn een echt probleem: ze lijken op verdwaalde punten. Houd het gebied achter lopende tekst vrij van de grotere sterren, of laat de sterren in dat gebied helemaal weg.

Dit is het soort balans dat Gradiently zelf regelt. Een Mark weet waar je woorden staan, verplaatst zijn rustigste, best contrasterende gebied erachter en maakt drukke details bij de letters rustiger, zodat een kosmische achtergrond de kop nooit opslokt. Marks kunnen ook langzame beweging dragen, wat beter bij een sterrenstelsel past dan welk stilstaand beeld ook.

Waar galaxy-kleurverlopen het best werken

Gaming en streaming zijn de natuurlijke match, en branding voor Twitch-streamers laat zien hoe je één look houdt over panelen, banners en overlays. Voor meer donkere ondergronden die gloeien, lees donkere kleurverloopachtergronden.