Pure CSS mesh and angular gradients, 24 free backgrounds (CSS, SVG, PNG)

These backgrounds are for UI designers and front-end developers who want a soft gradient behind a header, a card, a landing page or a slide, without loading an image. Each background is written in pure CSS: one class to put on an element, colours stored in variables, a light variant and a dark variant. The same background also comes as SVG and PNG, for a mockup, a presentation or a social media visual.

“Mesh” is meant here in the usual CSS sense: several radial gradients layered over a base colour. It is not a mesh in the sense of vector drawing software.

• 24 backgrounds, in 6 named palettes: dawn, lagoon, meadow, dune, orchid and slate. Each palette gives four backgrounds, from two families:
  • 12 mesh gradients, in two compositions: flow, a diagonal from top left to bottom right, and corner, two glows in opposite corners;
  • 12 angular gradients, in two compositions: sweep, a cone whose centre sits outside the frame at the top right, and halo, a centred cone softened in the middle.
• 2 themes, light and dark, for every background.
• 25 CSS files: css/gradients.css, which holds all 24 backgrounds, and one standalone file per background in css/fonds/, to copy and paste on its own.
• 48 SVG files and 48 PNG files: every background in light and dark.
• A palette file (palettes/palettes.json): the light and dark values of each palette and its text colour.
• 1 HTML demo page, offline: the 24 backgrounds as named tiles, each with a title and a line of text set in its reading area, and a light, dark or system switch.

Archive layout:

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

The zip also holds the licence text, a README file (LISEZMOI.txt) and the credits.

How to use it

Load css/gradients.css (or just the file of the background you picked), then put the background’s class on the element:

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

• One class per background, .gr-<name>, for example .gr-conic-lagoon-halo. It sets a base colour and the gradient layers, with no image loaded.
• Variables per palette: --gr-<palette>-base for the base colour, --gr-<palette>-1 to -4 for the tints, --gr-<palette>-text for text. Changing one variable recolours every background of the palette.
• Light and dark: the theme follows the visitor’s system setting. To force it, add data-theme="light" or data-theme="dark" on the page root.
• Readable text: at the top of each file in css/fonds/, a comment gives the background’s reading area. Text set in that area, in the --gr-<palette>-text colour, was checked in light and dark: the lowest contrast measured is 4.78:1, above the WCAG AA level for body text.

Production and AI

The palettes, the CSS, the SVG files, the render scripts and the demo were produced with an AI assistant, then reviewed and checked: PNG files compared with the CSS render, file weights capped, text contrast measured in each reading area, contact sheets reviewed in light and dark. No image was produced by an image generator: every file comes out of the same code.

• CSS (variables): the source of the backgrounds. It works in any recent browser, with no script or dependency.
• SVG: one file per background and per theme, with colours already resolved, for tools that do not read CSS. The SVG of an angular gradient is cut into sectors, because SVG has no conic gradient. The SVG files work in most design tools.
• PNG 2240 × 1260: a render of the CSS per background and per theme, for presentation, word processing or photo editing software.
• HTML: the demo page, to open in a browser, offline.

Good to know

• Safari and angular gradients: Safari renders 8 of the angular backgrounds slightly more saturated than Chrome, because it does not blend the colours of a conic gradient quite the same way. The difference is small: it mostly shows in a side-by-side comparison. The mesh backgrounds are not affected. If the exact colour matters, for a brand guide for instance, use the PNG, which looks the same everywhere.
• The backgrounds contain no grain or texture: they are smooth gradients.

The backgrounds come under a commercial licence: you can use them in personal and professional projects, including for clients and in products you sell, but you may not resell or redistribute the files, even for free.

• Mesh gradients to illustrate your mockups
• Grainy gradient: textured, elegant gradients

1.0.0 (11 November 2026): first version.