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

[Canonical HTML page](https://gradiently.design/sv/guide/glow-effect)

Ett sken ska se ut som ljus som faller på en yta: en klar kärna, en lång tonavklingning och ett mörkt rum runt omkring. Lägg det bakom former och in i bakgrunder, och håll det borta från bokstävernas kanter.

## The short version

- En glow-effekt är en klar färgkärna som tonar gradvis ut i en mörkare omgivning, så att den läses som ljus och inte som färg.
- Sken fungerar bäst på former, knappar, produktfoton och bakgrunder, där de ger djup och leder blicken.
- En gloria av sken kring text suddar ut bokstävernas kanter och gör dem svårare att läsa, så håll orden skarpa och lägg ljuset någon annanstans.
- I CSS är ett mjukt sken oftast en radiell gradient som tonar till genomskinlig eller en box shadow med stor oskärpa och ingen förskjutning.
- Ett sken behöver en mörk eller dämpad grund för att synas, och lite korn hindrar den långa tonavklingningen från att få band.

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](https://gradiently.design/sv/guide/text-shadow-alternatives) går igenom de renare lösningarna.

### Undvik

- En suddig gloria som kramar rubriken
- Sken i samma färg som texten
- Flera sken av samma styrka som konkurrerar
- Ett starkt sken på en ljus bakgrund
- Sken på varje knapp, kort och ikon

### Gör så här

- Ljus bakom en produkt, form eller bild
- Ett sken åt ena sidan, orden över det lugna området
- Ett huvudljus och högst ett svagare eko
- En mörk eller dämpad grund så att ljuset får plats
- Sken reserverat för det enda som spelar roll

## 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.

- Glödsken: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Poolljus: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Scensken underifrån: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Limesignal: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)`
- Fönsterljus på papper: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)`
- Violett lampa: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Fem mörka sken och ett ljust. Den ljusa versionen fungerar eftersom skenet är varmare och klarare än en redan blek grund, inte för att det är starkare.

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](https://gradiently.design/sv/guide/muddy-gradients). För mer om själva formen, se [radiella gradienter](https://gradiently.design/sv/guide/radial-gradient).

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

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. **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. **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. **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. **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](https://gradiently.design/sv/guide/grainy-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) listar alla värden.

```css
/* 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;
}
```

Tre sken, inget av dem på text. Att stapla två eller tre box shadows med fallande styrka ger en mjukare kant än en enda stor skugga.

| Metod | Bäst för | Kostnad | Se upp med |
| --- | --- | --- | --- |
| `box-shadow` | Knappar, kort, inmatningsfält | Låg | Klipps av `overflow: hidden` på en förälder |
| `radial-gradient`-lager | Ljus bakom bilder och sektioner | Låg | Bandning på långa mörka toner |
| Form med `filter: blur()` | Hero-bakgrunder, ambienta klot | Högre, särskilt när den animeras | Ommålningskostnad vid scroll, håll den stilla eller liten |

Välj den billigaste metod som ger utseendet. De flesta sken på en sida bör vara gradienter eller skuggor, inte suddade element.

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](https://gradiently.design/sv/guide/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.

En stående eventstory där en klar fläck i bakgrunden ligger precis bakom rubriken och tvättar ut den

Ljus som löper rakt genom rubriken: det klaraste området hamnar på bokstäverna och plattar ut dem.

Samma stående eventstory med det klara skenet flyttat bort från rubriken och ett lugnt mörkt område bakom texten

Samma story med ljuset hållet borta från orden. Skenet sätter fortfarande stämningen, och texten förblir skarp.

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](https://gradiently.design/sv/guide/auto-ink-legibility).

- Nattgrund: #09071a
- Indigoavklingning: #1e1b4b
- Violett ljus: #6d28d9
- Lilakärna: #c4b5fd
- Varm accent: #fde68a
- Skarp text: #f8fafc

En skenpalett i fyra lager: grund, avklingning, ljus och kärna, plus en varm accent och en textfärg som aldrig tar upp skenet.

## 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](https://gradiently.design/sv/guide/neon-gradients) är mättad, elektrisk färg med en tunn klar linje i mitten, närmare skyltar. [Ljusläckor](https://gradiently.design/sv/guide/light-leaks) ä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.

## FAQ

### Hur gör jag en glow-effekt i CSS?

Använd en `box-shadow` utan förskjutning och med stor oskärpa, till exempel `0 0 24px` i en halvgenomskinlig färg, eller en radiell gradient som tonar till genomskinlig bakom elementet. För det mjukaste skenet, sudda en färgad form med `filter: blur()`.

### Ska jag lägga ett sken runt text?

Nej. En gloria mjukar upp bokstävernas kanter och sänker kontrasten, så orden blir svårare att läsa. Håll texten skarp och placera skenet bakom en form eller i bakgrunden i närheten.

### Vilken bakgrund får ett sken att sticka ut?

En mörk eller dämpad grund i samma färgfamilj som skenet, till exempel en djup indigo bakom ett violett ljus. På en klarvit bakgrund har ett sken ingenstans att ta vägen.

### Varför har min glödande gradient band?

Långa, mörka toner har få färgsteg att arbeta med, så skärmar visar synliga band. Lägg till ett lager fint korn eller exportera i högre kvalitet för att dölja dem.

### Vad är skillnaden mellan ett sken och en neoneffekt?

Ett sken är brett, mjukt ljus från en källa. Neon är mättad färg med en tunn, intensivt klar linje i mitten, som ett skyltrör.