---
canonical: 'https://htmlcsstoimage.com/examples/png-transparent-background/csharp'
title: 'PNG with transparent background | Example - C# (HttpClient)'
description: 'Generate images with a transparent backgound'
---

# PNG with transparent background

Generate images with a transparent backgound

You can create PNGs with a transparent background by simply adding `body { background: transparent }` to your CSS. Take a look at this example.

**Note:** this only works for PNGs. If you render the image as a JPG, the background will show as white.

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/01a029e6-2652-790a-848d-a6a3f55474b5>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/png-transparent-background/csharp)

## HTML

```html
<div class="wrapper">
  <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
        <stop id="stop1" stop-color="rgba(248, 117, 55, 1)" offset="0%"></stop>
        <stop id="stop2" stop-color="rgba(251, 168, 31, 1)" offset="100%"></stop>
      </linearGradient>
    </defs>
    <path fill="url(#sw-gradient)" d="M24.6,-27.9C31.2,-23.7,35.5,-15.4,34.6,-7.9C33.8,-0.5,27.8,6.1,23.1,12.4C18.3,18.7,14.8,24.8,9.5,27.3C4.2,29.8,-2.9,28.6,-10.8,26.9C-18.7,25.2,-27.3,23,-33.1,17.1C-38.9,11.2,-41.8,1.7,-38.9,-5.5C-36,-12.7,-27.5,-17.6,-20,-21.7C-12.6,-25.7,-6.3,-29,1.3,-30.6C9,-32.2,17.9,-32.1,24.6,-27.9Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;"></path>
  </svg>
</div>
```

## CSS

```css
.wrapper {
  width: 400px;
  height: 400px;
}
body {
  background: transparent;
}

```

## 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
{
  "render_when_ready": false,
  "transparent_background": true
}
```

## Complete C# request (HttpClient)

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

```csharp
using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Collections.Generic;
using System.Text;
using System.Text.Json.Nodes;

var apiId = Environment.GetEnvironmentVariable("HCTI_API_ID")!;
var apiKey = Environment.GetEnvironmentVariable("HCTI_API_KEY")!;
using var client = new HttpClient();
var credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes($"{apiId}:{apiKey}"));
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", credentials);

var request = new
{
    html = """
           <div class="wrapper">
             <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
               <defs>
                 <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
                   <stop id="stop1" stop-color="rgba(248, 117, 55, 1)" offset="0%"></stop>
                   <stop id="stop2" stop-color="rgba(251, 168, 31, 1)" offset="100%"></stop>
                 </linearGradient>
               </defs>
               <path fill="url(#sw-gradient)" d="M24.6,-27.9C31.2,-23.7,35.5,-15.4,34.6,-7.9C33.8,-0.5,27.8,6.1,23.1,12.4C18.3,18.7,14.8,24.8,9.5,27.3C4.2,29.8,-2.9,28.6,-10.8,26.9C-18.7,25.2,-27.3,23,-33.1,17.1C-38.9,11.2,-41.8,1.7,-38.9,-5.5C-36,-12.7,-27.5,-17.6,-20,-21.7C-12.6,-25.7,-6.3,-29,1.3,-30.6C9,-32.2,17.9,-32.1,24.6,-27.9Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;"></path>
             </svg>
           </div>
           """,
    css = """
          .wrapper {
            width: 400px;
            height: 400px;
          }
          body {
            background: transparent;
          }
          
          """,
    render_when_ready = false,
    transparent_background = true,
};

using var response = await client.PostAsJsonAsync("https://hcti.io/v1/image", request);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<JsonObject>();
var imageUrl = result?["url"]?.GetValue<string>();
if (imageUrl is not null)
{
    Console.WriteLine(imageUrl);
}

```

## 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/png-transparent-background/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/png-transparent-background/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/png-transparent-background/csharp-client.md)
  - [HttpClient](https://htmlcsstoimage.com/examples/png-transparent-background/csharp.md) — shown above
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/png-transparent-background/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/png-transparent-background/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/png-transparent-background/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/png-transparent-background/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/png-transparent-background/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/png-transparent-background/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
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [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/png-transparent-background/csharp)
- [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.