60 multilingual fonts, 5000+ icons, 9 image formats (SVG, PNG, JPEG, WebP, AVIF), gradient textures, text highlighting — every parameter can be previewed in real time
5000+ Tabler Icons with Outline and Filled styles, customizable size
Complete API parameter reference, text highlighting guide, and icon-only display mode
Use {{...}} in the text parameter to wrap the parts you want highlighted. All highlighted segments share the same style. Tip: You can also type {{...}} directly in the Text Content input above — the system will detect and apply highlights automatically.
hlcolor
Highlight Color
Sets the highlight color. Supports HEX format (e.g., FF5733) or color names (e.g., red).
?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2
Highlight Gradient Color 2
Sets the second color for gradient highlight. Setting this automatically enables gradient effect, with hlcolor as the start color.
?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient
Highlight Gradient Direction
Sets the gradient direction. Defaults to horizontal when not set.
horizontal Horizontal (left to right)
vertical Vertical (top to bottom)
diagonal Diagonal (top-left to bottom-right)
?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont
Highlight Font
Specifies an independent font for highlighted text. The value is the font file name (without the .ttf extension).
?text={{Brand}}&hlfont=Poppins-Bold
hlbold
Highlight Bold
Makes highlighted text bold. Value: true or 1.
?text={{Important}}&hlbold=true
http://localhost:8080/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733
Effect:"MockImg.Dev" — Img shown in red
http://localhost:8080/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6
Effect: "Gradient" shown in pink-to-purple horizontal gradient
http://localhost:8080/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6
Effect: "MockImg" shown in blue with Poppins-Bold font
http://localhost:8080/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444
Effect: "Important" shown in red and bold
http://localhost:8080/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold
Effect: "Premium" shown with diagonal gradient (gold to red) in Montserrat-Bold font
http://localhost:8080/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6
Effect: Both "MockImg" and placeholder text shown in blue (shared highlight style)
http://localhost:8080/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981
Effect: "MockImg" shown in green, remaining text uses default color
http://localhost:8080/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24
Effect: In dark theme, "Mode" shown in gold highlight
{{...}} markers are not counted in text width calculations and do not affect layout{{...}} markers are not supported — inner markers are treated as plain texthl* style settings\n for line breaks)icon parametertext parameter, or text is emptyAuto: icon size = 80% of the smaller image dimension (min 24px, max 90%)
Custom: use iconsize parameter to override auto calculation
http://localhost:8080/600x400.png?icon=outline/heart&iconcolor=FF5733
Effect: Heart icon auto-enlarged and centered in red
http://localhost:8080/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal
Effect: Star icon with gold-to-red diagonal gradient
http://localhost:8080/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent
Effect: User icon on transparent background — perfect for avatars
http://localhost:8080/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20
Effect: White heart icon on pink gradient with rounded corners
http://localhost:8080/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark
Effect: Gold star icon on dark background
http://localhost:8080/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6
Effect: User icon in circle with border — ideal for avatar placeholders
| Mode | URL | Effect |
|---|---|---|
| Icon-Only (no text) | ?icon=outline/heart |
Icon auto-enlarged and centered, no text |
| Icon + Empty Text | ?icon=outline/heart&text= |
Same as icon-only |
| Icon + Text | ?icon=outline/heart&text=Love |
Icon and text side by side (original behavior) |
| No Icon No Text | 600x400.png |
Dimension text (default behavior) |
iconcolor, iconcolor2, icongradient, iconsize) work as expected32x32.ico?icon=filled/star&iconcolor=FFD700
