L’essentiel en bref
- Un dégradé de ciel convaincant est le plus profond en haut et le plus pâle à l’horizon, car la lumière près de l’horizon traverse plus d’air.
- À l’aube et au crépuscule, les couleurs chaudes restent basses, près de l’horizon, et les bleus froids restent au-dessus.
- Menez un dégradé de ciel à la verticale avec
180degen CSS, pour que le haut du design se lise comme le haut du ciel. - Les ciels de nuit paraissent plus naturels avec une bande un peu plus claire à l’horizon qu’avec un noir uni.
- Une encre foncée se lit bien sur les ciels de midi et bas sur un ciel d’aube, tandis qu’une encre claire convient au haut d’un ciel d’aube, au crépuscule, à l’heure bleue et à la nuit.
Sur cette page
Un dégradé de ciel va d’une couleur plus profonde au zénith à une plus pâle à l’horizon, car c’est ainsi que se comporte la lumière du jour : près de l’horizon, elle traverse plus d’air, se diffuse davantage et glisse vers le blanc. Réussissez ce seul sens et presque n’importe quel bleu se lit comme du ciel. Voici des codes à copier pour six moments de la journée, de la première lueur à une nuit sans lune, avec des notes sur l’endroit où chacun fonctionne et la couleur de texte qui s’y pose.
Comment le vrai ciel est agencé
Levez les yeux par temps clair : le bleu juste au-dessus de vous est plus riche que celui près des toits. Au lever et au coucher du soleil, sa lumière traverse tant d’atmosphère que la plus grande partie du bleu est diffusée avant de vous atteindre, laissant des rouges, des oranges et des roses bas dans le ciel tandis que le zénith reste froid. D’où deux règles pour tout dégradé de ciel : profond en haut, pâle en bas, et des couleurs chaudes seulement près de l’horizon.
Codes de dégradé d’aube et de lever de soleil
L’aube est le ciel le plus doux de la journée. Le haut est encore indigo de nuit, le milieu devient lilas, et une bande de rose et de pêche se pose à l’horizon. Il paraît calme et plein d’espoir, ce qui convient aux marques de bien-être, aux routines du matin, aux annonces de nouveauté et à tout ce qui veut paraître tendre plutôt que bruyant.
Dégradés de ciel de plein midi et de jour
Un ciel de plein midi dégagé est le dégradé bleu ciel classique : un bleu saturé en haut qui s’efface en un bleu pâle, presque blanc, à l’horizon. Gardez la teinte stable et laissez la clarté faire le travail. Si l’arrêt du bas vire au gris plutôt qu’au bleu pâle, le ciel commence à paraître pollué. Un après-midi brumeux suit la même idée avec moins de saturation, et un jour couvert remplace le bleu par un gris froid.
Pour d’autres bleus au-delà du ciel, du marine à la glace, voyez les codes de dégradé bleu. Si vous voulez aussi l’eau sous le ciel, l’article sur le dégradé océan fonctionne dans l’autre sens : pâle en haut, profond en bas.
Codes de l’heure dorée, du crépuscule et de l’heure bleue
Le ciel du soir est l’endroit où les dégradés de ciel deviennent dramatiques. L’heure dorée garde un bleu de jour au-dessus et un ambre fort à l’horizon, et la douce bande grisâtre entre les deux est réelle : ne la combattez pas. Le crépuscule fait tomber le bleu vers le marine et ajoute du magenta et du corail. L’heure bleue, le court moment après le départ du soleil, est presque entièrement bleue et l’un des fonds sombres les plus flatteurs qui soient.
Si votre design penche entièrement vers les oranges et les roses sans aucun bleu, vous êtes passé du ciel au coucher de soleil, et les codes de dégradé coucher de soleil vous serviront mieux.
Codes de dégradé de ciel nocturne
Un ciel de nuit est rarement noir pur. Les villes, la lune et la faible lueur de l’atmosphère gardent l’horizon un peu plus clair que le zénith. Construisez un dégradé de nuit avec un haut presque noir et un horizon marine profond : il se lit comme du ciel ; inversez-le et il se lit comme un trou. Pour les étoiles, le clair de lune et bien d’autres bleus sombres, lisez le guide du dégradé de ciel nocturne.
linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)Quel ciel pour quel design
Bon pour
Couleur de texte
Impression
Bon pour
Couleur de texte
Bon pour
Couleur de texte
Impression
Bon pour
Couleur de texte
Impression
Bon pour
Couleur de texte
Impression
Bon pour
Couleur de texte
Ce dernier point compte davantage sur les ciels que sur la plupart des dégradés, car un ciel passe du sombre au clair par nature. Placez les mots là où le ciel est le plus calme et choisissez l’encre pour cette zone, pas pour tout le dégradé. Le texte sur dégradé va plus loin. Dans Gradiently, c’est géré pour vous : un Mark garde sa région la plus calme derrière les mots, et l’encre Auto choisit un texte clair ou foncé ligne par ligne d’après la palette du Mark.
Une story pour un cours matinal. Le titre se pose en texte clair dans le haut calme du ciel, et les détails plus bas, là où la lumière est la plus douce.
Des dégradés de ciel pour chaque format
Les formats hauts conviennent parfaitement aux ciels : une story ou une épingle peut montrer toute la montée de l’horizon au zénith. Les formats larges l’écrasent : gardez donc les couleurs d’horizon dans le tiers inférieur et laissez le haut du ciel remplir le reste. C’est un agencement différent pour chaque taille, et c’est pourquoi recadrer une image sur plusieurs formats fait en général perdre l’horizon.
Story 1080×1920
1080 × 1920
Épingle Pinterest 1000×1500
1000 × 1500
Hero de site 1920×1080
1920 × 1080
En-tête X 1500×500
1500 × 500
Un dégradé de ciel en CSS pour chaque heure du jour
Sur un site web, trois propriétés personnalisées suffisent à décrire n’importe quel ciel. Changez une classe et toute la section change d’heure, ce qui est pratique pour un hero qui suit l’heure locale du visiteur ou une page qui s’assombrit au fil d’un récit.
.sky {
min-height: 100vh;
background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}
.sky--dawn { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }Pour les angles, les positions d’arrêt et les replis, voir le dégradé linéaire CSS.
Les questions qu’on nous pose
Quelles couleurs composent un dégradé de ciel ?
Un ciel de jour va d’un bleu saturé comme #1f6fd1 en haut à un bleu pâle comme #dceefb à l’horizon. L’aube et le crépuscule ajoutent du rose, de la pêche, du magenta ou du corail près du bas seulement.
Dans quel sens un dégradé de ciel doit-il aller ?
De haut en bas, avec la couleur la plus sombre en haut. En CSS : linear-gradient(180deg, haut, bas).
Comment distinguer un dégradé de lever de soleil d’un coucher de soleil ?
En design, un lever de soleil paraît en général plus doux et plus frais, avec du lilas et de la pêche et la bande chaude basse et fine. Les couchers de soleil se dessinent plus saturés, avec un orange et un magenta plus forts qui montent plus haut.
Quelle couleur de texte sur un dégradé bleu ciel ?
Un bleu marine foncé ou un anthracite se lit bien sur les ciels de midi et près d’un horizon d’aube. Employez du blanc sur les ciels de crépuscule, d’heure bleue et de nuit, et en haut d’un ciel d’aube, et vérifiez le contraste là où se posent les mots.
Pourquoi mon dégradé de ciel nocturne paraît-il rayé ?
Les dégradés très sombres ont peu de paliers de couleur : les écrans montrent donc des bandes. Ajoutez une légère couche de grain et exportez en PNG plutôt qu’en JPEG très compressé.
É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