Skip to content

[css-backgrounds-4] Possible background-clip value to punch holes in the background layer in the shape of font charatcters #11160

@jsnkuhn

Description

@jsnkuhn

A background-clip value to punch holes in the background-color/background-image in the shape of font characters as seen below:

knock-out-text

possible value name?:

text-cut
text-punch
mask-text
knockout-text (photoshop term)

This is doable right now in CSS with mix-blend-mode but has a limitation where the background must be white or black.
https://www.w3schools.com/howto/howto_css_cutout_text.asp

Other methods to do this now can be found on this Stack Overflow question with 119k views over almost 12 years. That's an average of 27 views per day:

Transparent text cut out of background
https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background

Knockout option in Photoshop:
https://helpx.adobe.com/photoshop/using/knockout-reveal-content-layers.html

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions