FillThat Documentation

Quick Start

Every image is created from a clean URL:

Example: https://fillth.at/800x600/Hello-World/667eea/white

Required Segments

• WIDTHxHEIGHT: Dimensions in pixels (min 50×50, max 4000×4000).
• TEXT: Text to render; use dashes or underscores for spaces.
• BG_COLOR: Background color (hex or CSS color name).
• TEXT_COLOR: Text color (hex or CSS color name).

Optional Query Parameters

• gradient=true — Enable a two-color gradient.
• gradientend=COLOR — Gradient end color (requires gradient=true).
• fontsize=NUMBER — Override default font size.
• ai=true — Enable AI generation (if configured).
• credit=false — Hide credits/watermark when allowed by config.

Examples

/800x600/Landing-Header/667eea/white

/600x400/Gallery/FF6B6B/FFFFFF?gradient=true&gradientend=2B2D42

/1200x630/Social-Share/1E1E2E/E0DEF4

Behavior & Limits

• Defaults: If no text is provided, dimensions appear as text (e.g., "800 × 600").
• Validation: Inputs are sanitized; invalid colors revert to defaults.
• Caching: Redis primary with filesystem fallback; cache headers sent on responses.
• Rate limiting: Optional IP-based throttling to keep the service healthy.
• Format: Output is always WebP when supported by GD.

Integration Tips

• Use consistent aspect ratios to avoid layout shifts; the CSS already sets object-fit and aspect-ratio for previews.
• Preload hero images on landing pages to improve LCP.
• Prefer hex colors for deterministic output across browsers.
• Keep text concise (200 characters max) for better rendering.

More Help