Presets, saving and the JSON import and export format

The built-in preset library

The gallery below the generator holds 70 presets in five categories, fourteen in each: Popular, Material, Glass, Neumorphic and Creative. Each tile is a small box wearing the preset's real shadow at 60 per cent scale, on the canvas the preset was designed for, so what you see on the tile is what loads. Click a tile and the whole state replaces what is in the generator: every layer, the box size, radius and colour, and the canvas, including the photograph if the preset uses one.

The categories mean what they say. Material holds shadows built the way Google's elevation system builds them, with a key shadow and an ambient one. Glass holds translucent boxes with backdrop blur and an inset edge, all on image canvases, because glass over a flat colour looks like nothing. Neumorphic holds the light-and-dark soft UI pairs on a matching background, with the contrast caveat that goes with them. Creative is where the neon glows and the long shadows live. Loading a preset is the fastest way to learn the tool: apply one, then open its layers and see how the effect was built.

Saving your own presets

Open the My presets group at the bottom of the console, type a name, press Save. The current state is stored under that name and appears in the list below, most recent first. Click the name to load it, or the cross beside it to delete it. If you press Save with an empty name the preset is called "Shadow 1", "Shadow 2" and so on, which is fine for a scratch list and useless a week later, so name the ones you mean to keep.

A saved preset captures everything the URL captures: the layers with their visibility flags, the box, the canvas and the label. It does not capture the active layer or the output tab, which are session details rather than design decisions. Separately from presets, the generator also remembers your work in progress, so closing the tab and coming back resumes the shadow you were editing; press Reset in the Shadow group to start from the default.

Where saved presets live

Saved presets are kept in the browser's localStorage, on this site's origin, and nowhere else. MDN describes the mechanism in one line, "the stored data is saved across browser sessions", and notes that unlike sessionStorage it "has no expiration time". That is the promise: come back next week on the same machine and browser, and the list is still there. It is also the limit. Storage is per browser and per device, a private window discards it, and clearing site data wipes it. There is no account and no server copy, deliberately, because a tool like this should not need one. If a browser refuses storage (some do in private mode), the console says so and saving still works for the visit; export is how you keep it.

Exporting to JSON

Press Export JSON and the browser downloads box-shadows.json containing every saved preset. If nothing is saved yet, it exports the current shadow on its own, named from the name field or "Current shadow". The file is plain UTF-8 text, indented, and sized in kilobytes, so it is happy in an email, a ticket, a design system repository or a gist.

The JSON format

The file is deliberately readable. There is a format marker so a future importer can tell what it is looking at, a version number, and an array of presets, each with a name and a state. The state is the same object the generator works on internally:

{
  "format": "box-shadow-generator",
  "version": 1,
  "presets": [
    {
      "name": "Card, resting",
      "state": {
        "layers": [
          { "x": 0, "y": 1, "blur": 2, "spread": 0, "colour": "#1b2340", "alpha": 0.06, "inset": false, "on": true },
          { "x": 0, "y": 8, "blur": 24, "spread": 0, "colour": "#1b2340", "alpha": 0.12, "inset": false, "on": true }
        ],
        "box": { "w": 240, "h": 160, "radius": 12, "colour": "#ffffff", "alpha": 1, "backdrop": 0, "text": "Card" },
        "canvas": { "mode": "light", "colour": "#e0e5ec", "image": "" }
      }
    }
  ]
}

British spelling of colour is what the exporter writes; the importer accepts color as well, so a file written the other way still loads. Everything is validated on import: numbers are clamped to the ranges above, a bad hex falls back to the default, and an unknown canvas mode becomes light.

Importing, and what is accepted

Press Import JSON, choose a file, and the presets in it are added to the top of your list and saved. The first imported preset is loaded into the generator so you can see it landed. Four shapes are accepted: the full document above; a bare array of { name, state } objects; a single { name, state } object; or a bare state object with a layers array, which is imported as "Imported shadow". Anything else produces a message in the readout's status line explaining what was wrong ("That file is not valid JSON" or "No presets found in that file") and leaves your list untouched.

Imports are additive. Nothing you already have is overwritten, even if the names match, so importing the same file twice gives you two of everything. Delete the duplicates from the list if that happens.

Sharing a library with a team

The export file is the right thing to commit to a design system repository next to the tokens it describes. Keep the JSON in the repo and anyone on the team can import it, adjust a level in the generator, export again and open a pull request with a diff that is readable line by line. For one shadow rather than a library, a share link is quicker: it is the same state, encoded in the address bar instead of a file.