J—P

Currently accepting new projects and available for hire.

Adjust Color Opacity

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.

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

Credit: una.im/color-mix-opacity