Blush Presents
Doodle Ipsum
The lorem ipsum of illustrations. Just customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools.
Choose a style
Proportion
Background
How to use Doodle Ipsum
How to use Doodle Ipsum
Embed a random image in your project with the following URL format:
https://doodleipsum.com/[width]x[height]/[category]
Example:
Dimensions
Specify dimensions by using [width]x[height] in the URL.
Only one dimension is required, for example to get an image 500px tall use https://doodleipsum.com/x500
Only one dimension is required, for example to get an image 500px tall use https://doodleipsum.com/x500
Static Image
By default you will get a random image on every page load.
To get a static image, visit the link in your browser. It will redirect you to a static URL that you can use.
Tip: It forwards you to a URL with i=[imageId] - you can remove this to randomize the image again, or use the tool at the top of this page to generate the static link.
To get a static image, visit the link in your browser. It will redirect you to a static URL that you can use.
Tip: It forwards you to a URL with i=[imageId] - you can remove this to randomize the image again, or use the tool at the top of this page to generate the static link.
Use a Specific Category
Use a specific category by appending /[category] to the url.
Multiple random images
If you are placing multiple random images on a page, you may notice they appear all as the same image due to browser caching.
To ensure they are all unique, append a cache-bust parameter (such as n=1, n=2, n=3, etc) to the end of the URL.
Example:
To ensure they are all unique, append a cache-bust parameter (such as n=1, n=2, n=3, etc) to the end of the URL.
Example:
<div style="display: flex; gap: 8px">
<img src="https://doodleipsum.com/100x100/avatar?bg=lightgray&n=1" />
<img src="https://doodleipsum.com/100x100/avatar?bg=lightgray&n=2" />
<img src="https://doodleipsum.com/100x100/avatar?bg=lightgray&n=3" />
<img src="https://doodleipsum.com/100x100/avatar?bg=lightgray&n=4" />
</div>Advanced Features
Advanced Features
Use Doodle Ipsum's advanced features by adding special query parameters.
To add parameters, a ? is added after the url, and an & is added in between each parameter.
Example:
Background Color
Add a background color with the bg=[hex] query parameter.
Circle
Get a circle with the shape=circle query parameter.
Tip: Also add a background color (otherwise the circle is invisible).
Tip: Also add a background color (otherwise the circle is invisible).
Grayscale
Get a grayscale image with the sat=-100 query parameter.
Blur
Get a blurred image with the blur=[amount] query parameter.
Use the Blush API on your own project
Doodle Ipsum is just an example of what you can do with the Blush API. Do you have a creative tool that also needs doodles? Get on the waitlist for when it’s launched.Get on the Waitlist
Doodle Ipsum
Powered by Blush© Blush Design Inc. All Rights Reserved