Tools
Image Generation

Image Studio

Generate dynamic placeholder images and Open Graph preview cards instantly via URL or the visual builder below.

New Tool: Image Studio is actively being improved. If you encounter any issues or have any suggestions, please share them in our Discord server.
Size
×
800×400 1200×630 600×400 400×400 1920×1080
Theme
None Discord Dark Light Minimal Neon Glass
Colors
Text
Style
Glass Effect
Drop Shadow
Debug Overlay
Live Preview
Configure options to generate a preview
Configure options above to generate a URL
Content
Style
Preview (1200 × 630)
Fill in the fields to generate a preview
Fill in the fields above to generate a URL
Card Type
Suggestion Feature Error Bug Product Profile Stats
Content
Preview (800 × 400)
Fill in the fields to generate a preview
Fill in the fields above to generate a URL

Basic Image Generation

Generate placeholder images instantly via URL. Images are served as SVG - scalable and extremely fast.

https://img.devlynlabs.com/img/{width}x{height} https://img.devlynlabs.com/img/{width}x{height}/{bg-hex} https://img.devlynlabs.com/img/{width}x{height}/{bg-hex}/{text-hex}

Examples:

https://img.devlynlabs.com/img/800x400 https://img.devlynlabs.com/img/800x400/5865F2 https://img.devlynlabs.com/img/800x400/5865F2/FFFFFF

Query Parameters

Append these to any image URL for advanced customization.

?text=Hello+WorldText overlay
?bg=5865F2Background color (hex)
?color=FFFFFFText color (hex)
?font=poppinsinter, poppins, roboto, lato, montserrat, nunito, raleway, oswald, outfit, manrope, dm-sans, space-grotesk, playfair, georgia, jetbrains-mono, fira-mono, ibm-plex-mono, mono, system
?size=48Font size in px
?weight=600Font weight
?align=centerleft, center, right
?gradient=5865F2,9333EA,B13CFFGradient - 2 to 6 comma-separated hex colors
?angle=135Gradient angle in degrees (0–359, default 135)
?text=Line1%0ALine2Multi-line text - use %0A or \n for newlines
?pattern=gridgrid, dots, diagonal, waves, plus
?radius=16Border radius in px
?glass=trueGlass / frosted effect
?shadow=trueDrop shadow
?theme=discorddiscord, dark, light, minimal, neon, glass
?title=X&subtitle=YTwo-line text with hierarchy
?debug=trueOverlay metadata info
?random=trueRandom color palette

Open Graph Cards

Generate 1200×630 preview cards for Discord, Twitter/X, GitHub, and any link preview platform.

https://img.devlynlabs.com/og?title=My+Project&description=Cool+tool&brand=Devlyn+Labs
?title=Card title (required)
?description=Subtitle text
?brand=Brand name shown in header
?accent=9429c5Accent color
?bg=0f172aBackground color
?gradient=5865F2,9333EA,B13CFFGradient - 2 to 6 comma-separated hex colors
?angle=135Gradient angle in degrees (default 135)
?theme=darkBuilt-in theme preset

Data Cards

Styled cards for feature requests, bugs, suggestions, and more. Great for Discord bots and dashboards.

https://img.devlynlabs.com/card/suggestion?title=Add+Webhooks&votes=42&status=priority&author=Aaron

Card types:

suggestion feature error bug product profile stats

Parameters:

?title=Card title
?description=Body text
?votes=42Vote count
?status=priorityopen, planned, in-progress, priority, review, completed, closed
?author=NameSubmitter name

Usage in HTML / Markdown

Embed generated images anywhere images are supported.

<!-- HTML with gradient and angle --> <img src="https://img.devlynlabs.com/img/800x400/5865F2?text=Hello&gradient=5865F2,9333EA&angle=135" alt="Placeholder"/> <!-- Multi-line text: use %0A or \n for newlines --> <img src="https://img.devlynlabs.com/img/800x400/1a1a2e?text=Line+One%0ALine+Two" alt="Multi-line"/> <!-- Markdown --> ![Placeholder](https://img.devlynlabs.com/img/800x400/5865F2?text=Hello) <!-- Open Graph meta tag --> <meta property="og:image" content="https://img.devlynlabs.com/og?title=My+Project&description=Cool+tool&gradient=5865F2,9333EA&angle=90"/>