Branded social images using TailwindCSS
Create your custom images for the Open Graph protocol using our free API.
Daily Hero @tailgraphHey feed! Just found a new superb tool based on @tailwindcss
Generate OG images using TailwindCSS with a free API
Create your custom images for the Open Graph protocol using our free API.
What's the TailGraph service?
TailGraph is a free API to help developers and content creators easily generate OG images using TailwindCSS.
Try it out
Use our visual editor to create your Open Graph template or, if you feel confident with TailwindCSS, just go to the docs.
Font Family Title Text Logo Background Overlay Footer Container
Docs
You can use our visual editor to create your template in a more visual way. Although this is cool to get an overview, you can actually make use of every TailwindCSS class to customize your OG image.
Layout structure
It's also important to know which HTML structure is working behind the scenes, to understand how to squeeze our generator capabilities.
Behind everything, there's the background. It can be an image from a URL, a gradient or just a plain color. Everything thanks to Tailwind!
Sometimes, the the background may be too dark or too clear for our text. That's why, right above the background, we placed the overlay layer. This layer is pretended to be used as a gradient or a plain color with some opacity, but there are more things you can do with it. TailGraph is also bundled with TailwindCSS Blend Mode, so you can blend your overlay with the background by using any of its classes.
Finally, there are two main elements above this overlay:
- Container View: It's a div which contains the logo and both texts.
- Footer: It's a div with absolute positioning at the bottom of the image.
This is the title
This is the secondary text
Hey! I am the footer.
API Params
To create your desired Open Graph image, we will accept the following parameters on our URL (https://og.tailgraph.com/og)
| Query Parameter | Description | Type | Default value |
|---|---|---|---|
| baseFontSize | Tailwind units are based on rem. This parameter would modify the sizing of every item on the image. | Number | 16 (px) |
| fontFamily | Font name from Google Fonts. If it contains multiple words, spaces must be replaced by "+" (i.e. "Reggae+One") | String | None |
| logoUrl | Fully qualified URL of the desired logo. | URL | None |
| logoTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| title | Title text. | String | None |
| titleTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| titleFontFamily | Font name from Google Fonts. If it contains multiple words, spaces must be replaced by "+" (i.e. "Reggae+One"). This value would override the global `fontFamily` configuration. | String | None |
| text | Secondary text. | String | None |
| textTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| textFontFamily | Font name from Google Fonts. If it contains multiple words, spaces must be replaced by "+" (i.e. "Reggae+One"). This value would override the global `fontFamily` configuration. | String | None |
| bgUrl | Background image URL. | URL | None |
| bgTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| overlay | Defines if the overlay layer should be displayed or not. | Boolean (1 or 0) | None |
| overlayTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| footer | Footer text. | String | None |
| footerTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| containerTailwind | Tailwind CSS classes string (separated by spaces). | String | None |
| Refresh | From time to time, our little robot does not generate the correct image. To refresh it, just put this parameter to 1 and he will try it again :). Once generated, it will be cached until you refresh it again. | String | None |
Frequently asked questions
- Why would I need this service?
Well, this service came to my mind as I was creating custom websites and I wanted to create a custom Open Graph image for each blog post, automatically. I think it makes it super easy to create your own OG layout and reuse it throughout your whole project.
- Will you be adding different layouts?
Sure! The whole structure is thought to allow multiple layouts. Feel free to contact me over Twitter at @raullg97 to talk about different layouts :-)
- Is this really free?
Yup! The intention is to leave this service free forever.
- Is this service independent from TailwindCSS?
Totally. We have no link to the TailwindCSS team. We are just in love with the wonderful gift it is for developers.