Simple Gradient Placeholder Image API
Generate beautiful SVG gradient placeholder images instantly with a simple, free API. Perfect for web development, UI mockups, prototypes, and responsive applications.
Easily Generate Placeholder SVG Gradient
Use the URL to get a random SVG gradient with a default size of 400x400.
https://placegradient.recodes26.dev/api
To get a specified size, just add width and height to the URL.
https://placegradient.recodes26.dev/api/600
https://placegradient.recodes26.dev/api/600/400
Custom CSS Colors
PlaceGradient supports over 140 CSS color names, such as blue, crimson, cyan, and more. To use a color for a gradient, type ?color= and type a color. Click here for a full list of available CSS colors.
NOTE: PlaceGradient supports only color names at the moment. Hex colors will not work.
https://placegradient.recodes26.dev/api?color=DarkMagenta
Using Seeds
You can use seeds to get a predictable gradient every time. To use seeds for a gradient, type ?seed= and input either numbers or letters. Your seed cannot be more than 20 characters long.
https://placegradient.recodes26.dev/api?seed=hello
Gradient Color Theory
PlaceGradient uses color theory to create stunning gradients. You can customize your color theory using the ?theory= parameter. Choose from complementary, monochromatic, or analogous options for your gradient. The acceptable parameter values are listed below.
https://placegradient.recodes26.dev/api?theory=comp
| Theory | Parameter | Usage | Description |
|---|---|---|---|
| Complementary | comp | https://placegradient.recodes26.dev/api?theory=comp | Opposite colors; high contrast. |
| Monochromatic | mono | https://placegradient.recodes26.dev/api?theory=mono | One color; varying shades |
| Analogous | analog | https://placegradient.recodes26.dev/api?theory=analog | Neighboring colors; smooth harmony. |
Combining Parameters
You can mix and match parameters to create unique, personalized gradients. For each additional parameter, use & followed by the parameter name and value.
https://placegradient.recodes26.dev/api/400/200?theory=analog&color=MediumSlateBlue&seed=happy
Where to use
PlaceGradient can be used whenever you need a placeholder image for your website or a simple linear gradient image. Each generated image is an SVG, keeping your site running fast. You can use PlaceGradient inside an image or as a background.
Note: When using a gradient with NextJS's Image component, you must add unoptimized to your component, or else your gradient will not work.
Free & Open Source
PlaceGradient is fully open-source and hosted on GitHub. If you have an issue, bugs, suggestions, or a question, feel free to contribute or open an issue on GitHub.
If PlaceGradient helped you, show support by ⭐ starring the project on GitHub and sharing the tools with others. Thank you for using PlaceGradient!