# Gradientformer: klatter, kugler og sfærer, der ser ægte ud

[Canonical HTML page](https://gradiently.design/da/guide/gradient-shapes)

En klat med en gradient på er nem. En klat, der ser ud til at have vægt og stå i lys, er noget andet. Forskellen er fem små beslutninger om, hvor lyset kommer fra.

## The short version

- Gradientformer ser tredimensionelle ud, når hver form i designet er skyggelagt fra den samme tænkte lyskilde.
- En overbevisende sfære har fem zoner: et højlys, en belyst side, en kerneskygge, et bånd af reflekteret lys nær kanten og en slagskygge under den.
- I CSS er en sfære et rundt element med en radial gradient, hvis centrum er flyttet mod lyset, for eksempel `circle at 30% 30%`.
- Klatter og organiske former kan laves med ujævne `border-radius`-værdier og skyggelægges med den samme radiale gradient som en sfære.
- Skygger bør være en mørkere, køligere udgave af formens egen farve frem for grå eller sort.

**Gradientformer** er klatter, kugler, sfærer og piller fyldt med en overgang, der får dem til at se belyste ud, som om de havde volumen. De ser ægte ud, når skyggelægningen følger én lyskilde: et klart højlys på den side, der vender mod lyset, en mørkere kerneskygge på den modsatte side, en svag kant af reflekteret lys helt ude ved kanten og en blød skygge på underlaget. Springer du en af dem over, læses formen som et fladt klistermærke med en gradient på. Gør du dem rigtigt, er to farver nok til at antyde en solid genstand.

## Sådan falder lyset på en rund form

Malere har beskrevet det i århundreder, og det gælder enhver rund form, du tegner. Vælg en lysretning, før du vælger en farve, og skyggelæg så hver zone i rækkefølge. Øverst til venstre er konventionen, fordi læserne forventer det, men enhver retning virker, hvis du er konsekvent.

| Zone | Hvor den sidder | Farve |
| --- | --- | --- |
| Højlys | Punktet tættest på lyset | Næsten hvid, tonet med lysets farve |
| Belyst side | Halvdelen, der vender mod lyset | Formens sande farve, når den er klarest |
| Kerneskygge | Hvor overfladen drejer væk | Det mørkeste bånd, lidt køligere |
| Reflekteret lys | En tynd kant ved den skyggede side | Lidt lysere end kerneskyggen |
| Slagskygge | På overfladen nedenunder | Blød, mørk, mørkest hvor den rører |

De fem zoner på en belyst sfære. Den reflekterede kant er den, der oftest bliver glemt, og den, der sælger rundheden.

## Skyggeopskrifter, du kan kopiere

Disse farveprøver er lysstudier: den skyggelægning, du ville placere inde i en cirkel, en cylinder eller en kegle. Hver er belyst fra øverst til venstre. Læg dem på en form med afrundede hjørner, og de bliver til solide genstande.

- Sfæreskygge, violet: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Sfæreskygge, rav: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Cylinderskygge, petrol: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Kegleskygge, indigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Læg mærke til det lille løft for enden af hver sfære og cylinder: det er det reflekterede lys ved den skyggede kant.

Sfæreopskrifterne slutter på en farve, der er lidt lysere end den før. Det sidste stop er den reflekterede kant, placeret lige inden for cirklens kant, så den overlever beskæringen. Uden den bliver formens kant død, og den ligner et hul frem for en kugle. Guiden til [radial gradient](https://gradiently.design/da/guide/radial-gradient) forklarer, hvordan centrums position og størrelse ændrer faldet.

## Sådan laver du en gradientsfære i CSS

Gør elementet til en cirkel med `border-radius: 50%`, og flyt så gradientens centrum mod lyset. Cirklen beskærer gradienten, så højlyset sidder forskudt inde i en helt rund form. En sløret, fladtrykt ellipse nedenunder giver slagskyggen.

```css
.sphere {
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%);
  position: relative;
}

.sphere::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 10, 70, 0.45) 0%, rgba(30, 10, 70, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}

.blob {
  width: 280px;
  aspect-ratio: 1;
  border-radius: 62% 38% 46% 54% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 32% 30%,
    #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%);
}
```

En violet sfære med en blød slagskygge og en ravfarvet klat lavet af otte ujævne border-radius-værdier.

> **Klatter, der ånder** Animér de otte `border-radius`-værdier mellem to sæt over 8 til 12 sekunder med blød start og slut. Formen vugger langsomt, mens lyset bliver, hvor det er, og det holder den troværdig. Respektér indstillinger for [reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion).

## Klatter, piller og organiske former

Klatter læses som venlige og bløde, og derfor er de populære til velvære, mad, børn og kreative brands. De følger de samme lysregler som en sfære, men deres buler fanger højlys flere steder. Behold ét hovedhøjlys, og lad de andre være svage. Mere om selve stilen finder du i [organiske former i design](https://gradiently.design/da/guide/organic-shapes-design).

- **Pille:** et afrundet rektangel skyggelagt som en cylinder, med lys i hele længden.
- **Sten:** en fladtrykt sfære, med et bredt højlys i lav kontrast, som mat sten.
- **Dråbe:** en sfære med et klart, skarpt højlys og en stærk reflekteret kant, som læses som blank.
- **Skyklat:** overlappende cirkler med ét fælles højlys, så de læses som én form.

## Hvorfor gradientformer ser flade ud, og hvordan du retter det

### Ser flad ud

- Højlys midt i, som om det var belyst fra beskueren
- Hver form belyst fra en ny side
- Grå eller sorte skygger
- Skarp kant mellem lys og mørke
- Ingen slagskygge, så formerne svæver

### Ser solid ud

- Højlys skubbet mod én lyskilde
- Alle former deler det samme lys
- Skygger i en dybere, køligere nuance af farven
- En lang, gradvis overgang ind i kerneskyggen
- En blød skygge forankrer hver form til en overflade

Farvetemperaturen gør meget af arbejdet. Varmt lys giver kølige skygger, og køligt lys giver varme. En violet sfære under et let rosa højlys med en blåviolet kerneskygge føles langt mere ægte end en, der bare går fra lys violet til mørk violet. [Varme og kolde farver](https://gradiently.design/da/guide/warm-and-cool-colors) forklarer parringen.

## Brug af gradientformer i et layout

1. **Vælg én lyskilde** Skriv den ned: øverst til venstre, varm. Hver form, skygge og hvert højlys følger den.
2. **Brug tre størrelser** Én stor form, én mellemstor og én lille læses som dybde. Fem lige store klatter læses som konfetti.
3. **Lad formerne gå ud af billedet** Når den største form beskæres ved en kant, føles lærredet større end sine rammer.
4. **Hold et roligt område til ord** Former er travle. Placér dem rundt om overskriften, aldrig bag den.
5. **Tilføj korn** Et fint støjlag får glat digital skyggelægning til at føles trykt og skjuler banding. Se [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients).

Et stående produktopslag, der annoncerer nye issmage, med bløde, afrundede gradientformer rundt om overskriften

Et produktopslag i 1080×1350. Afrundede, belyste former rundt om ordene, med overskriften på rolig bund.

Vil du hellere slippe for at skyggelægge former i hånden, er Marks fra Gradiently levende baggrunde bygget af lag af materialer, lys og korn, og de gengives rent i alle størrelser, du designer i. Til en enkelt glødende sfære brugt som herobillede, se [gradientkugler](https://gradiently.design/da/guide/gradient-orb).

## FAQ

### Hvordan får jeg en gradientform til at se 3D ud?

Skyggelæg den fra én lyskilde: et højlys på den belyste side, en mørkere kerneskygge på den modsatte side, en lidt lysere kant ved den skyggede side og en blød slagskygge nedenunder.

### Hvordan laver man en sfære med en CSS-gradient?

Giv et element `border-radius: 50%` og en `radial-gradient(circle at 30% 30%, ...)`, der går fra næsten hvid over hovedfarven til en mørk nuance. Når centrum flyttes mod lyset, sidder højlyset forskudt.

### Hvordan laver jeg en klatform i CSS?

Brug otte ujævne `border-radius`-værdier, som `62% 38% 46% 54% / 55% 42% 58% 45%`, og fyld den med en radial gradient.

### Hvilken farve skal skyggen på en gradientform have?

En mørkere, lidt køligere udgave af formens egen farve. Grå eller sorte skygger får farvede former til at se snavsede ud.