# Gradient shapes: blobs, orbs en bollen die echt lijken

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

Een blob met een verloop erop is makkelijk. Een blob die gewicht lijkt te hebben en in het licht staat, is iets anders. Het verschil zit in vijf kleine beslissingen over waar het licht vandaan komt.

## The short version

- Gradient shapes lijken driedimensionaal als elke vorm in het ontwerp vanuit dezelfde ingebeelde lichtbron is geschaduwd.
- Een overtuigende bol heeft vijf zones: een highlight, een belichte kant, een kernschaduw, een band weerkaatst licht bij de rand en een slagschaduw eronder.
- In CSS is een bol een rond element met een radiaal verloop waarvan het midden naar het licht is verschoven, bijvoorbeeld `circle at 30% 30%`.
- Blobs en organische vormen maak je met ongelijke `border-radius`-waarden en schaduw je met hetzelfde radiale verloop als een bol.
- Schaduwen moeten een donkerdere, koelere versie van de eigen kleur van de vorm zijn, geen grijs of zwart.

**Gradient shapes** zijn blobs, orbs, bollen en pillen gevuld met een verloop waardoor ze belicht lijken, alsof ze volume hebben. Ze lijken echt als de schaduwwerking één lichtbron volgt: een heldere highlight aan de kant naar het licht, een donkerdere kernschaduw aan de afgewende kant, een zwakke rand weerkaatst licht aan de uiterste rand en een zachte schaduw op de grond. Sla er één over en de vorm leest als een platte sticker met een verloop. Doe je het goed, dan zijn twee kleuren genoeg om een massief object te suggereren.

## Hoe licht op een ronde vorm valt

Schilders beschrijven dit al eeuwen en het geldt voor elke ronde vorm die je tekent. Kies een lichtrichting voordat je een kleur kiest en schaduw dan elke zone in volgorde. Linksboven is de conventie omdat lezers dat verwachten, maar elke richting werkt als je consequent blijft.

| Zone | Waar hij zit | Kleur |
| --- | --- | --- |
| Highlight | Het punt het dichtst bij het licht | Bijna wit, getint met de kleur van het licht |
| Belichte kant | De helft die naar het licht kijkt | De echte kleur van de vorm, op zijn helderst |
| Kernschaduw | Waar het oppervlak wegdraait | De donkerste band, iets koeler |
| Weerkaatst licht | Een dunne rand aan de schaduwkant | Iets lichter dan de kernschaduw |
| Slagschaduw | Op het oppervlak eronder | Zacht, donker, het donkerst waar hij raakt |

De vijf zones van een belichte bol. De weerkaatste rand wordt het vaakst gemist en verkoopt de rondheid.

## Schaduwrecepten om te kopiëren

Deze swatches zijn lichtstudies: de schaduwwerking die je binnen een cirkel, cilinder of kegel zou plaatsen. Elk is van linksboven belicht. Pas ze toe op een vorm met afgeronde hoeken en het worden massieve objecten.

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

Let op de lichte opleving aan het einde van elke bol en cilinder: dat is het weerkaatste licht aan de schaduwrand.

De bolrecepten eindigen op een kleur die iets lichter is dan de vorige. Die laatste stop is de weerkaatste rand, net binnen de rand van de cirkel geplaatst zodat hij het afsnijden overleeft. Zonder hem sterft de rand van de vorm af en lijkt het een gat in plaats van een bal. De gids [radiaal verloop](https://gradiently.design/nl/guide/radial-gradient) legt uit hoe de middenpositie en grootte de uitloop veranderen.

## Een verloopbol maken in CSS

Maak van het element een cirkel met `border-radius: 50%` en verschuif het midden van het verloop naar het licht. De cirkel snijdt het verloop af, dus de highlight zit uit het midden binnen een perfect ronde vorm. Een vervaagde, platgedrukte ellips eronder geeft de slagschaduw.

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

Een violette bol met een zachte slagschaduw en een ambergele blob van acht ongelijke border-radius-waarden.

> **Blobs die ademen** Animeer de acht `border-radius`-waarden in 8 tot 12 seconden tussen twee sets, met in- en uitlopen. De vorm wiebelt langzaam terwijl zijn belichting blijft staan, wat geloofwaardig blijft. Respecteer de instellingen voor [verminderde beweging](https://gradiently.design/nl/guide/reduced-motion).

## Blobs, pillen en organische vormen

Blobs lezen als vriendelijk en zacht, daarom zijn ze populair voor welzijns-, eten-, kinder- en creatieve merken. Ze volgen dezelfde lichtregels als een bol, maar hun bobbels vangen highlights op meer dan één plek. Houd één hoofdhighlight en laat de andere zwak zijn. Meer over de stijl zelf staat in [organische vormen in ontwerp](https://gradiently.design/nl/guide/organic-shapes-design).

- **Pil:** een afgeronde rechthoek geschaduwd als een cilinder, met het licht over zijn lengte.
- **Kiezel:** een platgedrukte bol, met brede highlight en laag contrast, als matte steen.
- **Druppel:** een bol met een heldere, scherpe highlight en een sterke weerkaatste rand, die glanzend leest.
- **Wolkblob:** overlappende cirkels met één gedeelde highlight, zodat ze als één vorm lezen.

## Waarom gradient shapes plat ogen en hoe je dat oplost

### Ziet er plat uit

- Highlight in het midden, alsof belicht vanuit de kijker
- Elke vorm van een andere kant belicht
- Grijze of zwarte schaduwen
- Harde rand tussen licht en donker
- Geen slagschaduw, dus vormen zweven

### Ziet er massief uit

- Highlight richting één lichtbron geduwd
- Elke vorm deelt hetzelfde licht
- Schaduwen die een diepere, koelere tint van de kleur zijn
- Een lange, geleidelijke draai naar de kernschaduw
- Een zachte schaduw verankert elke vorm aan een oppervlak

Kleurtemperatuur doet veel van het werk. Warm licht geeft koele schaduwen en koel licht warme. Een violette bol onder een iets roze highlight met een blauwviolette kernschaduw voelt veel echter dan een die gewoon van lichtviolet naar donkerviolet gaat. [Warme en koele kleuren](https://gradiently.design/nl/guide/warm-and-cool-colors) legt de combinatie uit.

## Gradient shapes gebruiken in een lay-out

1. **Kies één lichtbron** Schrijf hem op: linksboven, warm. Elke vorm, schaduw en highlight volgt hem.
2. **Gebruik drie formaten** Eén grote vorm, één middelgrote en één kleine leest als diepte. Vijf even grote blobs lezen als confetti.
3. **Laat vormen het kader verlaten** De grootste vorm aan een rand afsnijden laat het canvas groter aanvoelen dan zijn grenzen.
4. **Houd een rustig vlak voor woorden** Vormen zijn druk. Zet ze om de kop heen, nooit erachter.
5. **Voeg korrel toe** Een fijne ruislaag laat gladde digitale schaduwwerking gedrukt aanvoelen en verbergt banding. Zie [korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients).

Een staande productpost die nieuwe ijssmaken aankondigt, met zachte afgeronde verloopvormen rond de kop

Een productpost van 1080×1350. Afgeronde, belichte vormen rond de woorden, met de kop op rustige ondergrond.

Wil je vormen liever niet met de hand schaduwen, dan zijn de Marks van Gradiently levende achtergronden opgebouwd uit gestapelde materialen, licht en korrel, die op elk formaat waarin je ontwerpt schoon renderen. Voor één gloeiende bol als heroafbeelding zie je [gradient orbs](https://gradiently.design/nl/guide/gradient-orb).

## FAQ

### Hoe laat ik een verloopvorm er 3D uitzien?

Schaduw hem vanuit één lichtbron: een highlight aan de belichte kant, een donkerdere kernschaduw aan de afgewende kant, een iets lichtere rand aan de schaduwrand en een zachte slagschaduw eronder.

### Hoe maak je een bol met een CSS-verloop?

Geef een element `border-radius: 50%` en een `radial-gradient(circle at 30% 30%, ...)` die loopt van bijna wit naar de hoofdkleur naar een donkere tint. Het midden naar het licht verschuiven zet de highlight uit het midden.

### Hoe maak ik een blobvorm in CSS?

Gebruik acht ongelijke `border-radius`-waarden, zoals `62% 38% 46% 54% / 55% 42% 58% 45%`, en vul hem met een radiaal verloop.

### Welke kleur moet de schaduw op een verloopvorm hebben?

Een donkerdere, iets koelere versie van de eigen kleur van de vorm. Grijze of zwarte schaduwen laten gekleurde vormen er vuil uitzien.