Galaxgradient: kosmiska koder på djup rymd

En galaxgradient är mjuk nebulosafärg som glöder ur en nästan svart botten: violetta, magenta, turkosa eller glödfärgade moln som tonar ut i djup rymd, oftast med ett stoftlager av små stjärnor ovanpå. Hemligheten är proportionen. Verkliga foton av rymden är mest mörka, och färgen finns i ett eller två moln snarare än över hela bildrutan. Nedan finns kopierbara koder för de viktigaste nebulosafamiljerna och en komplett lagrad stjärnhimmel i CSS.

Vad som får en gradient att se ut som en galax

En blandning från lila till blått är bara en lila gradient. Den börjar läsas som rymd när den har de fyra saker ögat väntar sig av astronomibilder:

• En botten som är nästan svart, lätt tonad i blått eller violett snarare än neutral.
• Nebulosamoln som glöder från en ljus kärna och tonar ut ojämnt, vilket är ett jobb för radiella gradienter.
• En ljusare kärna inuti det ljusaste molnet: ett blekrosa, lila eller kräm nära vitt.
• Stjärnor: många små punkter av vitt och blekblått, några något större, strödda utan mönster.

Koder för galaxgradienter

Var och en av dessa är en enda radiell gradient du kan klistra in i ett designverktyg eller en stilmall. De är med avsikt tyngda mot den mörka änden. Den violetta är den klassiska rymdgradienten. Turkos känns kallare och mer vetenskaplig. Glödfärgad känns som en döende stjärna eller en science fiction-affisch.

Vill du ha något närmare hemma, en himmel med stjärnor och en måne i stället för djup rymd, är koderna för nattstjärnhimmel-gradient mildare. För draperier av grönt och violett ljus, se norrskensgradienter.

Bygg en galaxbakgrund i CSS, lager för lager

En enda gradient ger dig en nebulosa. En galax kommer av att stapla flera, vilket CSS gör bra eftersom background-image tar en lista. Det första lagret i listan målas överst.

1. 1

   Lägg botten

   En bred radiell gradient från tomrumsindigo i mitten till djup rymd vid kanterna, så att bildrutan aldrig ser platt ut.

2. 2

   Lägg till en huvudnebulosa

   En färgad radiell gradient som tonar ut till transparent, placerad utanför mitten, ungefär där en tredjedelslinje skulle korsa.

3. 3

   Lägg till ett andra, mindre moln

   En annan nyans, långt från den första, med lägre opacitet. Det ger djup utan att slåss om uppmärksamheten.

4. 4

   Strö ut stjärnor

   Små radiella punkter kakelplacerade i två eller tre olika storlekar, så att upprepningarna aldrig linjerar upp sig till ett synligt rutnät.

5. 5

   Avsluta med korn

   Ett svagt brusskikt över allt döljer bandning i de mörka områdena och får det att kännas fotografiskt.

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

Den radiella syntaxen, inklusive storlekar som ellipse 60% 25% och stoppositioner, tas upp i CSS radiell gradient. För kornlagret har CSS-brustextur ett kopierbart SVG-filterupplägg.

Så hindrar du en galaxgradient från att bli geggig

Det vanligaste misslyckandet är en galax som ser ut som ett blåmärke: färger som överlappar till brunt eller grått, och färg så jämnt utsmetad att ingenting glöder. Glöd behöver mörker runt sig. Lösningen är nästan alltid mindre färg, placerad mer noggrant. Färgteorin bakom finns i geggiga gradienter.

Lägga ord på en galaxbakgrund

Galaxbakgrunder passar vit eller mycket blek text, och passar den bäst på den mörka delen av bildrutan, inte över den ljusa nebulosakärnan. Sätt rubriken i det tomma utrymmet och låt molnet ligga åt ena sidan. Stjärnor bakom liten text är ett verkligt problem: de ser ut som förlupna punkter. Håll ytan bakom brödtext fri från de större stjärnorna, eller lämna stjärnorna borta från den regionen helt.

Det här är den sortens balans Gradiently klarar av själv. En Mark vet var dina ord finns, flyttar sitt lugnaste, mest kontrastrika område bakom dem och dämpar röriga detaljer nära bokstäverna, så att en kosmisk bakgrund aldrig sväljer rubriken. Marks kan också bära långsam rörelse, vilket passar en galax bättre än någon stillbild.

Där galaxgradienter fungerar bäst

Spel och streaming är den naturliga passformen, och varumärke för Twitch-streamare visar hur du håller en stil över paneler, banners och överlägg. För fler mörka bottnar som glöder, läs mörka gradientbakgrunder.