1. Open the studio
Every gradient lives in the studio at /gradient. Open it with the Open studio button in the top navigation. The URL updates as you edit — you can copy it at any point to save your work-in-progress as a share link.
2. Pick a palette
A gradient is only as good as its colors. Start by picking a palette from the palette panel — either a built-in system from Palettes or one you've saved. You can also drop in custom hex colors on the fly.
3. Choose a mode
- Single — one base color, automatically split into a light and dark stop. Best for calm, monochromatic backdrops.
- Two-color — blend two palette colors. Good for hero sections and marketing moments with a clear color story.
- Mesh — three or more colors arranged as soft mesh points. Great for cover images, decks, and richer surfaces.
4. Pick a style
Each mode ships with a curated set of styles — Nebula, Aurora, Velvet, Halo, and more. Styles change the shape of the light, not the colors. Cycle through them from the style picker; the preview updates live.
5. Tune intensity and texture
Intensity ranges from Haze (very light and airy) to Whisper (dense and dark). Use it to shift a gradient from a marketing hero to a subtle product surface without changing the underlying palette.
Texture adds finish — soft grain, paper, or noise — to keep large flat gradients from banding on screens and slides.
6. Rotate and choose an aspect ratio
The aspect ratio picker covers the common cases: 16:9 slides, 1:1 squares, 3:2 landscapes, 4:3 decks, and 9:16 verticals. Rotation lets you tilt directional gradients to match your layout.
7. Export
The export panel gives you the four things you actually need:
- PNG / JPG — raster export at the chosen aspect ratio. Best for slides, social, and thumbnails.
- SVG — scalable vector, best for websites and print.
- CSS — the formatted gradient value, ready to paste into a stylesheet or a Tailwind arbitrary utility.
Where to go next
Once you have a gradient you like, learn how to share and embed it, save it into a collection, or let your AI agent build gradients for you.