Een kleurverloopachtergrond maken die niet generiek oogt

Om een kleurverloopachtergrond te maken die niet generiek oogt, kies je eerst een ondergrondkleur, voeg je drie tot vijf verwante kleuren toe in plaats van twee, geef je het oppervlak een materiaal zoals korrel of zacht licht, en houd je een rustig gebied vrij waar woorden komen. De meeste kleurverloopachtergronden slaan al die stappen over: ze nemen een preset met twee kleuren, laten die van hoek tot hoek lopen en stoppen. Daarom lijken er zoveel inwisselbaar.

Waarom de meeste kleurverloopachtergronden op elkaar lijken

Ontwerptools, generators en sjablonen bieden allemaal hetzelfde korte lijstje overgangen, en trends duwen iedereen op hetzelfde moment naar dezelfde tinten. Violet naar roze, blauw naar cyaan en oranje naar magenta zijn prettig, maar ze worden zo breed gebruikt dat ze lezen als standaard in plaats van als keuze. Het bredere patroon wordt uitgelegd in waarom elke feed op elkaar lijkt.

Stap 1: kies een ondergrond

De ondergrond is de kleur waarop het kleurverloop ligt en waarnaar het terugkeert. Hij zet de sfeer meer dan welk accent ook. Een bijna zwarte ondergrond laat kleur gloeien en voelt luxe en nachtelijk; een warme gebroken witte ondergrond voelt gedrukt, rustig en redactioneel. Kies er een voordat je ook maar één accent kiest, en houd hem aan voor de hele set ontwerpen.

Kies je donker, lees dan donkere kleurverloopachtergronden voordat je exporteert, want in donkere overgangen valt banding het meest op.

Stap 2: kies drie tot vijf verwante kleuren

Twee kleuren zijn het makkelijkste kleurverloop om te maken en het makkelijkste om na te doen. Een kleine familie geeft diepte: een schaduwtint, een hoofdtint, een lichter accent en één accent dat je spaarzaam gebruikt. Houd buren dicht bij elkaar op de kleurencirkel zodat de overgangen zuiver blijven, en laat het accent apart staan. Tegengestelde kleuren naast elkaar worden grijs waar ze elkaar raken, zoals uitgelegd in modderige kleurverlopen.

Stap 3: geef hem een materiaal

Een strakke digitale overgang oogt als een standaardinstelling van een scherm. Een materiaal laat hem lijken op een oppervlak. Korrel leest als film of drukwerk, papierstructuur als ambacht, een glazige glans als technologie en zachte zijde als luxe. Je hebt niet veel nodig: een ruislaag op lage dekking is genoeg om het gevoel te veranderen. Textuur in kleurverlopen vergelijkt de families, en korrelige kleurverlopen heeft de code.

Stap 4: plan waar de woorden komen

Een achtergrond bestaat om iets te dragen: een kop, een prijs, een datum. Bepaal waar die woorden staan voordat je het kleurverloop afmaakt, en houd dat gebied rustiger en met meer contrast. Zet de helderste, drukste kleur weg van de tekst, meestal in een hoek, en laat de ondergrond achter de woorden zien. Voor contrastregels, zie kleurcontrast en toegankelijkheid.

Stap 5: render hem voor elk formaat

Een kleurverloop dat klopt als vierkante post, kan verkeerd ogen als staande story, omdat bijsnijden het heldere gebied verschuift. Behandel de achtergrond als een recept dat je op elk formaat rendert, waarbij je aanpast waar het licht valt, in plaats van als één afbeelding die je bijsnijdt.

Post 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Websitehero 1920×1080

1920 × 1080

Blogbanner 1200×600

1200 × 600

Een kleurverloopachtergrond in CSS

Op het web heeft een kleurverloop over de hele pagina één klassieke bug: is de pagina kort, dan herhaalt de achtergrond zich in banden. Geef het root-element een minimale hoogte, stel een effen terugvalkleur in die ook bij overscrollen zichtbaar is, en leg het kleurverloop erbovenop.

html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Voor een herosectie in plaats van een hele pagina werken dezelfde lagen op de sectie zelf. Achtergronden voor websiteheroes behandelt formaat en prestaties.

Je kleurverloopachtergrond bezitten

Zelfs een zorgvuldig gemaakte achtergrond kan worden nagemaakt en hergebruikt. In Gradiently is een afgewerkte achtergrond een Mark: een recept van kleuren, materialen, licht, korrel en beweging met precies één eigenaar tegelijk. Hij rendert op elk formaat waarin je ontwerpt en maakt uit zichzelf ruimte voor je woorden. Je kunt met elke Mark gratis ontwerpen, en er een claimen om hem van jou te maken.