Glow-effekt i design: blødt lys uden glorier om teksten

En glow-effekt er en plet lys: en lys kerne af farve, der langsomt toner ud i en mørkere omgivelse, som om en lampe sad lige bag fladen. Brugt rigtigt giver den et fladt design dybde og trækker øjet hen mod et produkt, en knap eller en form. Brugt dårligt bliver den en uskarp ring om overskriften. Reglen, hele denne side følger, er enkel: læg glowen på former og baggrunde, og hold ordene skarpe.

Hvor en glow hører hjemme, og hvor ikke

Lys omkring en genstand siger, at genstanden er vigtig. Lys omkring bogstaver gør noget andet: det blødgør deres kanter, sænker kontrasten mellem streg og baggrund og får linjen til at se uskarp ud på små skærme. Derfor skal glowen ligge nær ordene, aldrig vikle sig om dem. Hvis skrift har brug for hjælp for at kunne læses, så ret op på området bag den i stedet. Alternativer til tekstskygge gennemgår de renere muligheder.

Glow-baggrunde med koder

Den nemmeste glødende baggrund er en radial gradient, der starter lys, falder hurtigt gennem en rigere mellemtone og toner ud i en næsten sort bund. Flytter du midten væk fra centrum, føles den som en lyskilde og ikke som en skydeskive.

Hver af dem har tre dele: en kerne, der ligger tæt på hvid eller meget bleg, et mættet mellemstop og en dyb bund i samme familie. Springer du mellemstoppet over, ser glowen grå ud, hvor den møder det mørke, og det er problemet, der beskrives i mudrede gradienter. Mere om selve formen finder du i radiale gradienter.

Sådan laver du en glow, der ligner rigtigt lys

1. 1

   Start med en mørk eller dæmpet bund

   Lys har brug for mørke for at blive set. Et blåsort, et dybt grønt eller en støvet papirtone virker alle sammen, mens en skinnende hvid bund ikke giver glowen noget sted at gå hen.

2. 2

   Giv kernen en lysere, varmere tone

   Rigtigt lys er lysest og mindst mættet i midten. Gør kernen til en bleg udgave af glowens farve, for eksempel #fde68a til en orange glow.

3. 3

   Lad den falde langsomt af

   Aftoningen skal løbe over et stort område, ofte halvdelen af billedet. En kort aftoning ligner en projektør, der er klippet ud med saks.

4. 4

   Beslut, hvor lyset kommer fra

   Placér kernen nær en kant eller et hjørne eller bag det objekt, den belyser. Hold så resten af designet i overensstemmelse med den retning.

5. 5

   Tilføj fint korn

   Lange mørke aftoninger er der, hvor bånd ses mest. Et let støjlag skjuler trinene, og kornede gradienter viser metoden.

Endnu en test: slå glowen fra og se igen. Virker designet stadig, tilføjer glowen stemning. Falder det fra hinanden, gør glowen et arbejde, som layout eller kontrast burde gøre.

Glow-effekt i CSS

Der er tre pålidelige måder at lave en glow på nettet. En box-shadow uden forskydning og med stor sløring lyser kanterne på et kort eller en knap op. En radial gradient på et pseudoelement lægger en blød lyspøl bag et objekt. Og filter: blur() på en farvet form giver det blødeste resultat, til en højere gengivelsespris. MDN's reference til box-shadow opregner alle værdier.

/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}

På knapper skal du holde glowen diskret og teksten skarp: lyset hører til knappens form, ikke til dens ord. Den fulde skyggesyntaks står i CSS box shadow.

Glow i opslag, plakater og stories

I et stillestående design gør en glow mest nytte bag motivet eller i den tomme halvdel af billedet. Læg lyset der, hvor øjet først skal lande, og sæt overskriften over den mørkere, roligere del af bunden. Lyset fører læseren hen til ordene uden at røre dem.

Det er præcis det, en Gradiently Mark gør af sig selv. Dens roligste område lægger sig bag ordene, farver nær bogstaverne bliver dybere eller lysere, og Automatisk tekstfarve vælger lys eller mørk skrift for hver linje ud fra Markens palette, så der ikke skal tilføjes kasser, skygger eller glorier. Du kan se ideen i Automatisk tekstfarve.

Glow, neon og lyslækager sammenlignet

De tre bliver blandet sammen. En glow er blødt, bredt lys fra én kilde. Neongradienter er mættet, elektrisk farve med en tynd lys linje i hjertet, tættere på skiltning. Lyslækager er varme striber, der efterligner film, og som regel kommer ind fra en kant. Alle tre har brug for en mørk bund, og alle tre holder sig fra skriften. Vil du have lyset til at drive og skifte, er aurora-gradienter en bevægelig slægtning.