# Gradientformer: organiske former og kuler med ekte dybde

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

En organisk form med gradient er enkel å lage. En som ser tung ut og ligger i lyset, er noe annet. Forskjellen ligger i fem små valg om hvor lyset kommer fra.

## The short version

- Gradientformer virker tredimensjonale når alle formene i designet skyggelegges ut fra samme tenkte lyskilde.
- En troverdig kule har fem soner: et høylys, en belyst side, en kjerneskygge, et bånd med reflektert lys nær kanten og en slagskygge under.
- I CSS er en kule et sirkelformet element med en radial gradient der sentrum flyttes mot lyset, for eksempel `circle at 30% 30%`.
- Organiske former kan lages med ujevne `border-radius`-verdier og skyggelegges med samme radiale gradient som en kule.
- Skygger bør være en mørkere, kjøligere versjon av formens egen farge fremfor grå eller svarte.

**Gradientformer** er organiske former, kuler og kapsler fylt med en overgang som får dem til å virke belyste og romlige. De ser ekte ut når skyggeleggingen følger én lyskilde: et lyst høylys på siden mot lyset, en mørkere kjerneskygge på motsatt side, en svak kant av reflektert lys ytterst og en myk skygge på underlaget. Hopper du over en av delene, ligner formen et flatt klistremerke med gradient. Får du dem riktig, holder to farger for å antyde et solid objekt.

## Slik faller lys på en rund form

Malere har beskrevet dette i århundrer, og det gjelder alle runde former du tegner. Velg lysretning før du velger farge, og skyggelegg deretter hver sone i rekkefølge. Øverst til venstre er vanlig fordi leseren forventer det, men alle retninger fungerer hvis du er konsekvent.

| Sone | Plassering | Farge |
| --- | --- | --- |
| Høylys | Punktet nærmest lyset | Nesten hvitt, farget av lysets farge |
| Belyst side | Halvdelen som vender mot lyset | Formens egentlige farge på sitt lyseste |
| Kjerneskygge | Der overflaten vender bort | Det mørkeste båndet, litt kjøligere |
| Reflektert lys | En tynn rand langs skyggekanten | Litt lysere enn kjerneskyggen |
| Slagskygge | På underlaget under | Myk og mørk, mørkest ved kontaktpunktet |

De fem sonene på en belyst kule. Den reflekterte kanten blir oftest glemt, og det er den som gjør rundheten troverdig.

## Oppskrifter på skyggelegging du kan kopiere

Disse fargeprøvene er lysstudier: skyggeleggingen du ville lagt i en sirkel, sylinder eller kjegle. Alle belyses fra øverst til venstre. Legg dem i en form med avrundede hjørner, så blir de solide objekter.

- Skyggelagt kule, fiolett: `radial-gradient(circle at 30% 28%, #f5f3ff 0%, #c4b5fd 10%, #7c3aed 34%, #3b0f8a 62%, #5b21b6 78%)`
- Skyggelagt kule, ravgul: `radial-gradient(circle at 32% 30%, #fff7ed 0%, #fdba74 12%, #ea580c 38%, #7c2d12 64%, #9a3412 80%)`
- Skyggelagt sylinder, blågrønn: `linear-gradient(90deg, #134e4a 0%, #2dd4bf 22%, #ccfbf1 32%, #14b8a6 50%, #0f3d3a 85%, #115e59 100%)`
- Skyggelagt kjegle, indigo: `conic-gradient(from 200deg at 50% 50%, #1e1b4b, #a5b4fc, #eef2ff, #6366f1, #1e1b4b)`

Se etter den lille lysningen mot slutten av hver kule og sylinder. Det er det reflekterte lyset langs skyggekanten.

Kuleoppskriftene slutter med en farge som er litt lysere enn den forrige. Dette siste fargestoppet er den reflekterte kanten, plassert rett innenfor sirkelkanten slik at den ikke beskjæres bort. Uten den blir formens kant livløs, og den ligner et hull i stedet for en ball. Guiden til [radiale gradienter](https://gradiently.design/nb/guide/radial-gradient) forklarer hvordan sentrum og størrelse endrer lysfallet.

## Lag en gradientkule i CSS

Gjør elementet sirkelformet med `border-radius: 50%`, og flytt gradientens sentrum mot lyset. Sirkelen klipper gradienten, slik at høylyset ligger utenfor sentrum i en helt rund form. En uskarp, flattrykt ellipse under gir 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 fiolett kule med myk slagskygge og en ravgul organisk form laget med åtte ujevne verdier for hjørneradius.

> **Organiske former som puster** Animer de åtte `border-radius`-verdiene mellom to sett over 8 til 12 sekunder med myk inn- og utgang. Formen bølger langsomt mens lyset holder seg på plass, noe som gjør den troverdig. Respekter innstillinger for [redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion).

## Kapsler og organiske former

Organiske former oppleves vennlige og myke. Derfor brukes de ofte av merkevarer innen velvære, mat, barn og kreative fag. De følger samme lysregler som en kule, men utbulingene fanger høylys flere steder. Behold ett hovedhøylys, og la de andre være svake. Les mer om selve stilen i [organiske former i design](https://gradiently.design/nb/guide/organic-shapes-design).

- **Kapsel:** et avrundet rektangel skyggelagt som en sylinder, med lys langs lengderetningen.
- **Småstein:** en flattrykt kule med et bredt høylys og lav kontrast, som matt stein.
- **Dråpe:** en kule med et lyst, skarpt høylys og tydelig reflektert kant, slik at den virker blank.
- **Skyform:** overlappende sirkler med ett felles høylys, slik at de oppfattes som én form.

## Derfor virker gradientformer flate, og slik fikser du det

### Ser flatt ut

- Høylyset midt i sentrum, som om lyset kommer fra betrakteren
- Hver form belyses fra en annen side
- Grå eller svarte skygger
- Hard kant mellom lyst og mørkt
- Ingen slagskygge, så formene svever

### Ser romlig ut

- Høylyset flyttes mot én lyskilde
- Alle former deler samme lys
- Skygger i en dypere, kjøligere variant av fargen
- Lang, gradvis overgang til kjerneskyggen
- En myk skygge forankrer hver form til underlaget

Fargetemperaturen gjør mye av jobben. Varmt lys gir kjølige skygger, og kjølig lys gir varme. En fiolett kule med et svakt rosa høylys og blåfiolett kjerneskygge virker mye mer ekte enn en som bare går fra lys til mørk fiolett. [Varme og kalde farger](https://gradiently.design/nb/guide/warm-and-cool-colors) forklarer kombinasjonen.

## Bruk gradientformer i en layout

1. **Velg én lyskilde** Skriv det ned: øverst til venstre, varmt. Alle former, skygger og høylys følger dette.
2. **Bruk tre størrelser** Én stor form, én middels og én liten gir dybde. Fem like store organiske former ligner konfetti.
3. **La formene gå utenfor rammen** Når den største formen beskjæres ved en kant, virker lerretet større enn grensene.
4. **Behold et rolig område til ordene** Formene skaper aktivitet. Plasser dem rundt overskriften, aldri bak den.
5. **Legg til korn** Et fint støylag får glatt digital skyggelegging til å virke trykt og skjuler synlige bånd. Se [kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients).

Et stående produktinnlegg om nye issmaker med myke, avrundede gradientformer rundt overskriften

Et produktinnlegg på 1080×1350. Runde, belyste former rundt ordene, med overskriften på et rolig område.

Vil du slippe å skyggelegge former for hånd, er Markene i Gradiently levende bakgrunner bygget av stablede materialer, lys og korn. De gjengis skarpt i alle størrelsene du designer i. For en enkelt glødende kule som hovedbilde, se [gradientkuler](https://gradiently.design/nb/guide/gradient-orb).

## FAQ

### Hvordan får jeg en gradientform til å se tredimensjonal ut?

Skyggelegg den ut fra én lyskilde: et høylys på den belyste siden, en mørkere kjerneskygge på motsatt side, en litt lysere rand langs skyggekanten og en myk slagskygge under.

### Hvordan lager jeg en kule med CSS-gradient?

Gi et element `border-radius: 50%` og en `radial-gradient(circle at 30% 30%, ...)` som går fra nesten hvitt via hovedfargen til en mørk nyanse. Når sentrum flyttes mot lyset, havner høylyset utenfor sentrum.

### Hvordan lager jeg en organisk form i CSS?

Bruk åtte ujevne `border-radius`-verdier, som `62% 38% 46% 54% / 55% 42% 58% 45%`, og fyll formen med en radial gradient.

### Hvilken farge bør skyggen på en gradientform ha?

En mørkere, litt kjøligere variant av formens egen farge. Grå eller svarte skygger får fargede former til å se skitne ut.