---
canonical: 'https://htmlcsstoimage.com/examples/birthday-invite-card-email/csharp-client'
title: 'Birthday invite card | Example - C# (HCTI client)'
description: 'Autogenerated invite graphic for a party.'
---

# Birthday invite card

Autogenerated invite graphic for a party.

This example image shows a fun Google Font over an SVG background. Swap in your own text to autogenerate personalized messages.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/4217012e-5002-4916-96f3-6c157bf57556>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/birthday-invite-card-email/csharp-client)

## HTML

```html
<div class="p-4 background d-block text-center" style="width: 500px">
  <span class="tweet-text mb-4">
    Join us for Jen's birthday party this Saturday at Golden Gate Park. Starts at 1:30pm. Hope to see you there! 🥳
  </span>
  <div class="p-4">
  </div>
</div>

<!-- Include external CSS, JavaScript or Fonts! -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
```

## CSS

```css
.background {
  background-color: #ff7700;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc0000' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23aa0000' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d6002b' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b10022' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23d9004b' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b2003d' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23d3006c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23ac0057' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23c4008c' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239e0071' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa00aa' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23880088' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
background-size: cover;
}

.tweet-text {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #EF7E31 0%, #C72B4E 100%);
  font-weight: bold;
  font-size: 32px;
  color: #F3EBF1;
  font-family: 'Yusei Magic', sans-serif;
  margin-bottom: 20px;
  padding: px;
}
```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "google_fonts": ""
}
```

## Complete C# request (HCTI client)

This is the complete C# request for this example using HCTI client. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```csharp
// dotnet add package HtmlCssToImage

using HtmlCssToImage;
using HtmlCssToImage.Models;
using HtmlCssToImage.Models.Requests;
using System.Collections.Generic;
using System.Text.Json.Nodes;

// In an application, use IHttpClientFactory through dependency injection:
// https://www.nuget.org/packages/HtmlCssToImage.DependencyInjection
using var httpClient = new HttpClient();
var client = new HtmlCssToImageClient(
    httpClient,
    new HtmlCssToImageOptions(
        Environment.GetEnvironmentVariable("HCTI_API_ID")!,
        Environment.GetEnvironmentVariable("HCTI_API_KEY")!));

var request = new CreateHtmlCssImageRequest
{
    Html = """
           <div class="p-4 background d-block text-center" style="width: 500px">
             <span class="tweet-text mb-4">
               Join us for Jen's birthday party this Saturday at Golden Gate Park. Starts at 1:30pm. Hope to see you there! 🥳
             </span>
             <div class="p-4">
             </div>
           </div>
           
           <!-- Include external CSS, JavaScript or Fonts! -->
           <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
           
           <link rel="preconnect" href="https://fonts.gstatic.com">
           <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
           """,
    Css = """
          .background {
            background-color: #ff7700;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc0000' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23aa0000' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23d6002b' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b10022' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23d9004b' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23b2003d' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23d3006c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23ac0057' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23c4008c' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239e0071' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa00aa' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23880088' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
          background-size: cover;
          }
          
          .tweet-text {
            background-color: #fff2ac;
            background-image: linear-gradient(to right, #EF7E31 0%, #C72B4E 100%);
            font-weight: bold;
            font-size: 32px;
            color: #F3EBF1;
            font-family: 'Yusei Magic', sans-serif;
            margin-bottom: 20px;
            padding: px;
          }
          """,
};

using var result = await client.CreateImageAsync(request);
if (result.Success && result.Response is not null)
{
    Console.WriteLine(result.Response.Url);
}

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/birthday-invite-card-email/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/birthday-invite-card-email/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/birthday-invite-card-email/csharp-client.md) — shown above
  - [HttpClient](https://htmlcsstoimage.com/examples/birthday-invite-card-email/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/birthday-invite-card-email/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/birthday-invite-card-email/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/birthday-invite-card-email/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/birthday-invite-card-email/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/birthday-invite-card-email/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/birthday-invite-card-email/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.
- [Dog rates social card](https://htmlcsstoimage.com/examples/dog-rates-social-card.md): Simple social card example showing highlighted yellow text

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/birthday-invite-card-email/csharp-client)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.