# Photo Gradient

> Browser-based tool to generate warped mesh gradients from colors or photos

Photo Gradient lets you design custom mesh gradients using hex color palettes or extracted photo tones. It provides fine controls for wave warping, grain texture, and canvas dimensions, with an available Figma plugin.

Website: https://photogradient.com/

## What it is for

- Generate textured mesh gradients for website hero backgrounds
- Extract color palettes from an uploaded photo into a blended gradient
- Create grain-textured abstract wallpapers for UI design projects

## Features

- Curvature adjustment with Sharp or Bézier blending modes
- Warp Shape selector including wave distortion
- Customizable sliders for Warp intensity, Warp Size, and Noise grain
- Custom hex color input palette
- Configurable width and height canvas dimensions
- Direct image download export
- Figma plugin integration

## Pricing

Free to use

## Details

- Type: Web app
- Category: [Design](https://xiry.app/topics/design.md)
- Open source: no
- Platforms: Web
- For: UI/UX designers, web designers, and digital artists
- Alternative to: Mesh gradient tools, CSS Gradient, Coolors Gradient Generator
- Tags: gradients, mesh, design tool, backgrounds, figma, texture

## Why it was saved

- [@kalypsodesigns, 27 February 2025](https://www.instagram.com/p/DGkiVKcT0ju/): Generates aesthetic mesh and warped gradients with custom dimensions and export options for web backgrounds and graphics.

## Related

- [Super Visuals — Backgrounds Library](https://xiry.app/resources/super-visuals-backgrounds-library): Free Figma library of 200+ background textures and landing page hero layouts (Website, Free)
- [Grainient](https://xiry.app/resources/grainient): Curated library of grainy, smooth, and animated gradient background assets (Website, Freemium)
- [coolshapes](https://xiry.app/resources/coolshapes): Open-source abstract shapes with grainy gradients for design and dev projects. (Website, Free)
- [Shader Gradient](https://xiry.app/resources/shader-gradient): Design tool for generating animated 3D moving gradients and web components. (Web app, Free)
- [Backgrounds Supply — Freebies](https://xiry.app/resources/backgrounds-supply-freebies): Free aesthetic backgrounds including gradients, AI art, and 4K animated videos. (Website, Free)
- [Premium AI Backgrounds](https://xiry.app/resources/premium-ai-backgrounds): Free halftone landscape hero backgrounds designed for website headers and landing pages. (Website, Free)

Updated 3 October 2026. Page: https://xiry.app/resources/photo-gradient

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.