CSS Function

transparent

The transparent keyword represents a fully transparent color (rgba(0,0,0,0)). It is valid anywhere a color value is accepted.

Syntax

property: transparent

Parameters

NameTypeRequiredDescription
transparentkeywordYesEquivalent to rgba(0, 0, 0, 0) — fully transparent black

Examples

Transparent background

Removes background color.

css
.overlay {
  background-color: transparent;
}

Gradient to transparent

Fades blue to transparent.

css
background: linear-gradient(to bottom, #3b82f6, transparent);

Tailwind transparent

Tailwind includes bg-transparent and border-transparent utilities.

html
<div class="bg-transparent border-transparent">Ghost element</div>

Browser Support

✓

Chrome

v1++

✓

Firefox

v3++

✓

Safari

v1++

✓

Edge

v12++

✓

Opera

v10++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

bg-transparent, border-transparent, text-transparent, etc.

Frequently Asked Questions

Is transparent always rgba(0,0,0,0)?▼
Yes. Per the CSS spec, transparent is defined as rgba(0,0,0,0). This matters for gradient interpolation: gradients to transparent fade through black.
How do I avoid the dark band in gradients to transparent?▼
Use the same color with zero alpha instead: linear-gradient(#3b82f6, rgb(59 130 246 / 0)). This avoids the black mid-point from rgba(0,0,0,0).

Explore CSS Color Tools

Try our free tools to work with transparent and other CSS color functions.

Open Tools