L’essentiel en bref
- L’esthétique années 80 se construit avec des couleurs néon sur fonds sombres, un lettrage chrome, des dégradés de coucher de soleil, des grilles en perspective et des tons pastel façon Miami.
- Une grande part de ce que l’on appelle aujourd’hui esthétique années 80 est filtrée par la synthwave, un style musical et visuel qui a ressuscité le cinéma, les jeux d’arcade et la culture des synthétiseurs des années 1980 à partir des années 2000.
- Un dégradé de coucher de soleil qui va du jaune au violet en passant par l’orange et le rose, souvent découpé en bandes horizontales, est l’arrière-plan années 80 le plus reconnaissable.
- Le lettrage chrome imite le métal poli avec une ligne d’horizon nette au milieu des lettres, là où le reflet d’un ciel clair rencontre celui d’un sol sombre.
- Le néon fonctionne mieux en lignes et en formes sur fond sombre ; gardez la lueur loin du texte courant pour qu’il reste lisible.
Sur cette page
L’esthétique années 80, c’est du néon sur noir, un lettrage chrome, des dégradés de coucher de soleil découpés en bandes et une grille lumineuse qui file vers l’horizon, avec un côté plus doux de pastels de Miami et de motifs Memphis. La version d’aujourd’hui passe en grande partie par la synthwave, un style qui a ressuscité les films, les jeux d’arcade et la musique de synthétiseur des années 1980 à partir des années 2000. Voici ses ingrédients clés, des palettes avec codes, le CSS d’un soleil et d’une grille, et comment l’utiliser sans tomber dans le déguisement.
Les ingrédients de l’esthétique années 80
D’où il vient
À utiliser pour
D’où il vient
À utiliser pour
D’où il vient
À utiliser pour
D’où il vient
À utiliser pour
D’où il vient
À utiliser pour
D’où il vient
À utiliser pour
D’où il vient
À utiliser pour
Esthétique années 80 et synthwave
La synthwave, parfois appelée outrun d’après le jeu d’arcade de conduite de Sega de 1986, est un genre musical né en ligne au milieu des années 2000 qui emprunte beaucoup aux musiques de films des années 80. Ses pochettes ont défini l’image que beaucoup de gens se font aujourd’hui : un ciel violet sombre, un soleil rayé, une grille magenta et des lettres chromées. Le film Drive de 2011 et sa bande originale ont aidé à porter le style vers le grand public.
Alors quand un brief dit années 80, demandez quelles années 80. La version synthwave de nuit, la version pastel de Miami en plein jour et la version à motifs Memphis sont trois styles différents. Les couleurs synthwave et les couleurs vaporwave approfondissent les deux renaissances d’Internet, et le design Memphis couvre le côté motifs.
Palettes de couleurs années 80
Le dégradé chrome est celui à étudier. Le métal poli reflète un ciel clair au-dessus d’un sol sombre, donc la couleur part du clair, s’approfondit vers le milieu, bascule au sombre sur une ligne d’horizon nette, puis s’éclaircit de nouveau vers le bas. C’est cette ligne dure qui fait lire du métal plutôt que du gris. Les effets de texte chrome montrent comment l’appliquer à un lettrage, et les dégradés de coucher de soleil en proposent des versions plus douces pour le ciel.
Construire un soleil et une grille années 80 en CSS
.scene {
position: relative;
height: 100vh;
overflow: hidden;
background: linear-gradient(180deg, #0b0221 0%, #2b0a4a 55%, #0b0221 55%);
}
.sun {
position: absolute;
left: 50%;
top: 18%;
width: min(40vw, 320px);
aspect-ratio: 1;
translate: -50% 0;
border-radius: 50%;
background: linear-gradient(180deg, #ffd319 0%, #ff901f 45%, #ff2975 80%);
/* slice the lower half into bands */
mask-image: linear-gradient(180deg, #000 0 58%, transparent 58% 61%, #000 61% 70%, transparent 70% 74%, #000 74% 83%, transparent 83% 88%, #000 88%);
}
.floor {
position: absolute;
left: -50%;
right: -50%;
top: 55%;
bottom: -20%;
background-image:
linear-gradient(#ff2fd0 2px, transparent 2px),
linear-gradient(90deg, #ff2fd0 2px, transparent 2px);
background-size: 60px 60px;
transform: perspective(320px) rotateX(62deg);
transform-origin: top center;
}.sun et .floor dans .scene.Pour l’animer, déplacez le background-position du sol vers le bas en boucle et la grille semble foncer vers vous. Respectez les réglages de réduction des animations quand vous le faites ; les dégradés CSS animés détaillent le procédé.
Polices et lettrage années 80
Le texte faisait une grande part du travail dans les graphismes de la décennie. Les titres de films et les logos de produits utilisaient de lourdes italiques pour la vitesse, des capitales chromées ou extrudées pour le drame, et des scripts pinceau lâches pour tout ce qui se passait sur une plage. Un seul mot ainsi traité peut porter tout un design.
- Les sans empattement italiques lourds suggèrent le mouvement, parfaits pour tout ce qui est sportif ou rapide.
- Les capitales chromées fonctionnent pour un ou deux mots au plus ; les lignes plus longues perdent le reflet.
- Les scripts pinceau s’associent à la palette Miami, en petit à côté d’un sans empattement gras.
- Les polices pixel et grille font un clin d’œil aux arcades, mais se lisent mal sous une grande taille, gardez-les donc pour les titres.
Pour des familles à essayer, les polices rétro en liste par décennie.
Comment utiliser l’esthétique années 80 sans cliché
Cliché
- Soleil, grille, palmiers, chrome et VHS en même temps
- Une lueur néon autour de chaque ligne de texte
- Un script, une police chrome et une police pixel ensemble
- Du rétro pour le rétro, sans lien avec la marque
Réfléchi
- Un ingrédient héros, comme le soleil rayé
- Du néon sur les lignes et les formes, un texte net sur les zones calmes
- Une police d’affichage pour le titre, un sans empattement simple pour les détails
- Une raison : un produit rétro, un anniversaire, une soirée musicale
Si vous concevez dans Gradiently, ses traitements de lettrage Extrusion et Traînée donnent à un titre la profondeur et la vitesse d’un carton de titre années 80, et un Mark sombre avec des lumières violettes et magenta en fait le ciel nocturne, en gardant sa zone la plus calme derrière les mots pour que le texte reste net.
Une affiche de soirée années 80 : fond sombre, un seul titre audacieux, détails petits et simples.
Une miniature YouTube en 1280×720 avec un titre court et lourd qui se lit en petit.
Le style convient aux soirées musicales, aux chaînes de jeux, aux lancements de produits rétro, aux anniversaires et à tout ce qui veut un clin d’œil de nostalgie. Si vous voulez la décennie suivante, lisez l’esthétique années 90.
Les questions qu’on nous pose
Qu’est-ce que l’esthétique années 80 ?
Un style visuel fait de couleurs néon sur fonds sombres, de lettrage chrome, de dégradés de coucher de soleil, de grilles en perspective, de pastels de Miami et de motifs Memphis.
Quelles couleurs dans une palette années 80 ?
Magenta néon, cyan laser et jaune soleil sur minuit et violet profond pour le look de nuit, ou rose flamant, bleu piscine et pêche pour le look Miami.
Quelle différence entre l’esthétique années 80 et la synthwave ?
L’esthétique années 80 est le design propre à la décennie. La synthwave est un style musical et artistique plus tardif qui la ressuscite, et ses visuels ont façonné le look néon, soleil et grille que beaucoup imaginent aujourd’hui.
Comment faire un coucher de soleil années 80 en CSS ?
Utilisez un dégradé linéaire vertical du jaune au violet en passant par l’orange et le rose, et ajoutez des arrêts francs ou un masque pour découper des bandes sombres dans la moitié basse.
Quelles polices font années 80 ?
Un lettrage d’affichage chrome ou extrudé, des scripts pinceau et des sans empattement italiques lourds. Utilisez-en une pour le titre et un sans empattement simple pour tout le reste.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil