Dégradés maillés et angulaires en CSS pur, 24 fonds offerts (CSS, SVG, PNG)

Ces fonds s’adressent aux designers UI et aux développeurs front-end qui veulent un dégradé doux derrière un en-tête, une carte, une page d’accueil ou une diapositive, sans charger d’image. Chaque fond est écrit en CSS pur : une classe à poser sur un élément, des couleurs rangées dans des variables, une variante claire et une variante sombre. Le même fond existe aussi en SVG et en PNG, pour une maquette, une présentation ou un visuel de réseau social.

« Maillé » s’entend ici au sens courant du CSS : plusieurs dégradés radiaux superposés sur une couleur de fond. Ce n’est pas un maillage au sens des logiciels de dessin vectoriel.

• 24 fonds, répartis en 6 palettes nommées : dawn, lagoon, meadow, dune, orchid et slate. Chaque palette donne quatre fonds, de deux familles :
  • 12 dégradés maillés, en deux compositions : flow, une diagonale du haut à gauche vers le bas à droite, et corner, deux lueurs dans des coins opposés ;
  • 12 dégradés angulaires, en deux compositions : sweep, un cône dont le centre sort du cadre en haut à droite, et halo, un cône centré adouci en son milieu.
• 2 thèmes, clair et sombre, pour chaque fond.
• 25 fichiers CSS : css/gradients.css, qui réunit les 24 fonds, et un fichier autonome par fond dans css/fonds/, à copier-coller seul.
• 48 fichiers SVG et 48 fichiers PNG : chaque fond en clair et en sombre.
• Un fichier de palettes (palettes/palettes.json) : les valeurs claires et sombres de chaque palette et sa couleur de texte.
• 1 page HTML de démonstration, hors ligne : les 24 fonds en tuiles nommées, chacun avec un titre et une ligne de texte posés dans sa zone de lecture, et un sélecteur clair, sombre ou système.

Organisation de l’archive :

css/gradients.css
css/fonds/<nom>.css
svg/light/<nom>.svg
svg/dark/<nom>.svg
png/light/<nom>.png
png/dark/<nom>.png
palettes/palettes.json
demo/index.html

Le zip contient aussi le texte de la licence, un fichier LISEZMOI et les crédits.

Comment l’utiliser

Chargez css/gradients.css (ou le seul fichier du fond choisi), puis posez la classe du fond sur l’élément :

<link rel="stylesheet" href="css/gradients.css">
<header class="gr-mesh-dawn-flow">…</header>

• Une classe par fond, .gr-<nom>, par exemple .gr-conic-lagoon-halo. Elle pose une couleur de fond et les couches de dégradé, sans aucune image chargée.
• Des variables par palette : --gr-<palette>-base pour la couleur de fond, --gr-<palette>-1 à -4 pour les teintes, --gr-<palette>-text pour le texte. Changer une variable recolore tous les fonds de la palette.
• Clair et sombre : le thème suit le réglage du système de la personne qui visite. Pour l’imposer, ajoutez data-theme="light" ou data-theme="dark" sur la racine de la page.
• Texte lisible : en tête de chaque fichier de css/fonds/, un commentaire donne la zone de lecture du fond. Un texte posé dans cette zone, dans la couleur --gr-<palette>-text, a été contrôlé en clair comme en sombre : le plus faible contraste mesuré est de 4,78:1, au-dessus du niveau AA des WCAG pour le texte courant.

Fabrication et IA

Les palettes, le CSS, les SVG, les scripts de rendu et la démonstration ont été produits avec un assistant d’IA, puis relus et contrôlés : PNG comparés au rendu du CSS, poids des fichiers plafonnés, contraste du texte mesuré dans chaque zone de lecture, planches relues en clair et en sombre. Aucune image n’a été produite par un générateur d’images : chaque fichier sort du même code.

• CSS (variables) : la source des fonds. Il s’utilise dans tout navigateur récent, sans script ni dépendance.
• SVG : un fichier par fond et par thème, aux couleurs déjà résolues, pour les outils qui ne lisent pas le CSS. Le SVG d’un dégradé angulaire est une découpe en secteurs, car le SVG ne connaît pas le dégradé conique. Les fichiers SVG s’utilisent dans la plupart des outils de design.
• PNG 2240 × 1260 : un rendu du CSS par fond et par thème, pour les logiciels de présentation, de traitement de texte ou de retouche.
• HTML : la page de démonstration, à ouvrir dans un navigateur, sans connexion.

À savoir

• Safari et les dégradés angulaires : Safari rend 8 des fonds angulaires un peu plus saturés que Chrome, car il ne mélange pas tout à fait les couleurs d’un dégradé conique de la même façon. L’écart est léger : il se voit surtout en comparaison côte à côte. Les fonds maillés ne sont pas concernés. Si la couleur exacte compte, par exemple pour une charte, utilisez le PNG, qui s’affiche partout à l’identique.
• Les fonds ne contiennent ni grain ni texture : ce sont des dégradés lisses.

Les fonds sont livrés sous licence commerciale : vous pouvez les utiliser dans vos projets personnels et professionnels, y compris pour vos clients et dans les produits que vous vendez, mais pas revendre ni redistribuer les fichiers, même gratuitement.

• Le dégradé maillé pour illustrer vos maquettes
• Grainy gradient : des dégradés texturés et élégants

1.0.0 (11 novembre 2026) : première version.