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

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.

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

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

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.

• 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

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

Brug af gradientformer i et layout

1. 1

   Vælg én lyskilde

   Skriv den ned: øverst til venstre, varm. Hver form, skygge og hvert højlys følger den.

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

   Hold et roligt område til ord

   Former er travle. Placér dem rundt om overskriften, aldrig bag den.

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

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.