Fove

Documentation

Share a gradient anywhere

A Fove gradient isn't just an export — it's a URL. Every setting is encoded in the link, so anyone opening it sees the exact same gradient, and you can hand the same URL to a browser, an iframe, or an <img> tag.

The /view route is a full-screen, read-only preview of a gradient. It's the link you send to a teammate for review, or drop into Notion when you want a live preview (not a screenshot).

https://fove.design/view?mode=two&palette=quiet-lagoon&style=nebula&intensity=vivid

The URL round-trips every setting: mode, palette, style, intensity, rotation, texture, and the active color indices. Opening it in the studio (/gradient) drops you into the editor with the same gradient loaded.

Iframe embed (/embed)

The /embed route strips all chrome — just the gradient, sized to fill its container. Use it wherever HTML embeds work: your marketing site, a Storybook story, a product docs page.

<iframe
  src="https://fove.design/embed?mode=mesh&palette=atlas-dusk&style=mesh-atlas"
  style="width:100%;aspect-ratio:16/9;border:0;border-radius:16px"
  loading="lazy"
  title="Fove gradient"
></iframe>

The studio's Share menu generates this snippet for you with the current settings pre-filled — you can paste it straight into your page.

Image URL (/api/public/gradient.svg)

For places that only accept an image URL — GitHub READMEs, RSS, email, most CMSes — use the direct SVG endpoint. It renders the gradient server-side and returns an SVG document.

![Gradient](https://fove.design/api/public/gradient.svg?mode=two&palette=coral-reef&style=velvet)

Because it's an SVG, it scales cleanly on retina and print. Add ratio=16:9 to control the aspect, and rotation=45 to tilt directional gradients.

Which one should I use?

  • Share link — reviews, quick previews, "here's the exact gradient I picked."
  • Iframe — your own website or app, where you want a live, interactive preview.
  • Image URL — anywhere that only accepts an image (READMEs, docs platforms, email).

Where to go next

Save the gradients and palettes you keep reaching for in Palettes & collections.