How to Add Capsule Render Banners to Your GitHub Profile README

Capsule Render is a service that generates styled SVG banner images from URL parameters. The banners come in several shape styles (wave, cylinder, egg, waving, rounded, shark, slice, soft) with configurable gradient colors and optional text overlay. They are most commonly used as profile headers at the top of a README, above the name and bio, to create a visual identity for the profile.

The wave type is the most popular — it creates a soft gradient from left to right with a gentle wave shape at the bottom edge, creating a natural transition into the profile content below. The shark type creates an inverted wave suitable for bottom-of-page footers.

For a header with a gradient wave and name text:

![Header](https://capsule-render.vercel.app/api?type=waving&color=gradient&height=200&section=header&text=Your%20Name&fontSize=80&fontAlignY=35)

For a footer to close your README:

![Footer](https://capsule-render.vercel.app/api?type=waving&color=gradient&height=100&section=footer)

Key URL parameters:

• type: waving, egg, shark, cylinder, rounded, rect, soft, slice
• color: gradient (random gradient), auto (respects dark/light mode), or a specific hex value without #
• height: Banner height in pixels (header: 150-250, footer: 80-120)
• section: header or footer (determines wave direction)
• text: URL-encoded text to overlay (spaces as %20)
• fontSize: Text size in pixels
• fontAlignY: Vertical position of text (0-100)
• fontColor: Text color as hex without # (default: white)

For a custom color scheme rather than random gradient, specify two colors:

![Header](https://capsule-render.vercel.app/api?type=waving&color=0:E73C7E,100:23A6D5&height=200&section=header&text=Developer&fontSize=70)

The color parameter accepts gradient stops in the format start:COLOR,end:COLOR.

For dark/light mode compatibility, use color=auto which selects a color scheme based on the visitor's system preference. Combined with reversal=true you can invert the gradient direction for footer banners.

For subtitle text below the main title, add desc=Your+Subtitle and descAlignY=55 (slightly below the main text's fontAlignY value). Keep header text under 20 characters to prevent wrapping on mobile screens.

If the banner shows as a broken image, verify the URL is correctly formatted with ? before the first parameter and & between subsequent parameters. A common mistake is using spaces in the URL instead of %20 or + for word breaks in the text parameter.

If the gradient colors look different from what you expected, note that color=gradient selects colors randomly from a preset palette — the colors change on each server-side render. To get consistent colors across all profile loads, specify explicit hex color values using the 0:HEXCODE,100:HEXCODE format.

If the text is too large for the banner height, reduce fontSize or increase height. A font size of 60-80px works well for a 200px header. For footer banners with height of 100px, omit the text parameter entirely for a cleaner look.