Glow-effekt i design: mjukt ljus utan sken kring text

En glow-effekt är en fläck av ljus: en klar färgkärna som långsamt tonar ut i en mörkare omgivning, som om en lampa satt strax bakom ytan. Använd rätt ger den en platt design djup och drar blicken till en produkt, en knapp eller en form. Använd fel blir den en suddig ring runt rubriken. Regeln som hela den här sidan följer är enkel: lägg skenet på former och bakgrunder, och håll orden skarpa.

Var ett sken hör hemma, och var inte

Ljus runt ett föremål säger att föremålet är viktigt. Ljus runt bokstäver gör något annat: det mjukar upp deras kanter, sänker kontrasten mellan streck och bakgrund och får raden att se ofokuserad ut på små skärmar. Därför ska skenet ligga nära orden, aldrig lindat runt dem. Om text behöver hjälp att synas, fixa ytan bakom den i stället. Alternativ till textskugga går igenom de renare lösningarna.

Bakgrunder med glow-effekt och deras koder

Den enklaste glödande bakgrunden är en radiell gradient som börjar ljus, faller snabbt genom en rikare mellanton och tonar ut i en nästan svart grund. Att flytta mittpunkten bort från mitten gör att den känns som en ljuskälla och inte som en måltavla.

Var och en har tre delar: en kärna som ligger nära vitt eller mycket blek, ett mättat mellanstopp och en djup grund i samma familj. Hoppar du över mellanstoppet ser skenet grått ut där det möter mörkret, problemet som beskrivs i leriga gradienter. För mer om själva formen, se radiella gradienter.

Så gör du ett sken som ser ut som riktigt ljus

1. 1

   Börja med en mörk eller dämpad grund

   Ljus behöver mörker för att synas. Ett blåsvart, ett djupt grönt eller en dammig papperston fungerar alla, medan en klarvit grund ger skenet ingenstans att ta vägen.

2. 2

   Ge kärnan en ljusare, varmare nyans

   Riktigt ljus är klarast och minst mättat i mitten. Gör kärnan till en blek version av skenets färg, till exempel #fde68a för ett orange sken.

3. 3

   Låt det klinga av långsamt

   Tonavklingningen ska löpa över en stor yta, ofta halva bilden. En kort avklingning ser ut som en strålkastare utklippt med sax.

4. 4

   Bestäm var ljuset kommer ifrån

   Placera kärnan nära en kant eller ett hörn, eller bakom det föremål den lyser upp. Håll sedan resten av designen konsekvent med den riktningen.

5. 5

   Lägg till fint korn

   Långa mörka toner är där bandning syns mest. Ett lätt brusskikt döljer stegen, och korniga gradienter har metoden.

Ett test till: stäng av skenet och titta igen. Om designen fortfarande fungerar tillför skenet stämning. Om den faller samman gör skenet ett jobb som layout eller kontrast borde göra.

Glow-effekt i CSS

Det finns tre pålitliga sätt att göra ett sken på webben. En box-shadow utan förskjutning och med stor oskärpa lyser upp kanterna på ett kort eller en knapp. En radiell gradient på ett pseudoelement lägger en mjuk ljuspöl bakom ett föremål. Och filter: blur() på en färgad form ger det mjukaste resultatet, till en högre renderingskostnad. MDN:s referens för box-shadow listar alla värden.

/* 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å knappar, håll skenet subtilt och texten skarp: ljuset tillhör knappens form, inte dess ord. Den fullständiga skuggsyntaxen finns i CSS box shadow.

Sken i inlägg, affischer och stories

I en stillbild gör ett sken bäst nytta bakom motivet eller i den tomma halvan av bilden. Lägg ljuset där blicken ska landa först och sätt sedan rubriken över den mörkare, lugnare delen av grunden. Ljuset leder läsaren till orden utan att röra dem.

Det här är precis vad en Gradiently-Mark gör av sig själv. Dess lugnaste område lägger sig bakom orden, färger nära bokstäverna fördjupas eller lyfts, och Auto-bläck väljer ljus eller mörk text per rad ur Markens palett, så du behöver inte lägga till rutor, skuggor eller glorior. Du kan se idén i Auto-bläck.

Sken, neon och ljusläckor jämförda

De här tre blandas ihop. Ett sken är mjukt, brett ljus från en källa. Neongradienter är mättad, elektrisk färg med en tunn klar linje i mitten, närmare skyltar. Ljusläckor är varma streck som imiterar film, oftast inträngande från en kant. Alla tre behöver en mörk grund, och alla tre hålls borta från texten. Om du vill att ljuset ska driva och skifta är norrskensgradienter en rörlig släkting.