Gradientformer: organiske former og kuler med ekte dybde

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.

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.

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

.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%);
}

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.

• 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

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 forklarer kombinasjonen.

Bruk gradientformer i en layout

1. 1

   Velg én lyskilde

   Skriv det ned: øverst til venstre, varmt. Alle former, skygger og høylys følger dette.

2. 2

   Bruk tre størrelser

   Én stor form, én middels og én liten gir dybde. Fem like store organiske former ligner konfetti.

3. 3

   La formene gå utenfor rammen

   Når den største formen beskjæres ved en kant, virker lerretet større enn grensene.

4. 4

   Behold et rolig område til ordene

   Formene skaper aktivitet. Plasser dem rundt overskriften, aldri bak den.

5. 5

   Legg til korn

   Et fint støylag får glatt digital skyggelegging til å virke trykt og skjuler synlige bånd. Se kornete gradienter.

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.