---
type: collection
section: snippets
generated_at: 2026-05-19T08:45:17+02:00
total_entries: 1
tag_filter: Color
---

# Snippets

## Adjust Color Opacity

---
type: snippet
id: jKV0rmGhPI0PdyWV
title: Adjust Color Opacity
url: >
  https://www.jakubpelak.com/snippets/adjust-color-opacity
section: snippets
tags:
  - CSS
  - Color
published_at: 2025-03-08
---

Easily create a semi-transparent version of any color using `color-mix()`. This CSS function blends two colors in a specified ratio. In this example, `currentColor` is mixed with `transparent` at 50%, creating a softer, partially transparent effect that adapts to the element’s text or border color.

```css
.something {
  color: color-mix(in srgb, currentColor, transparent 50%);
}
```

Credit: (link: https://una.im/color-mix-opacity/)