Skeumorphic Text Highlighting

Sometimes it’s useful to highlight text passages within a web page.

I occasionally use this for personal notes, especially in preparation for meetings, to ensure I have easy access to both the most salient points and their respective context.

CSS adapted from Matt Pi and Max Hoffmann. Unfortunately (though inevitably?), this is littered with magic numbers.

mark:is(.type1, .type2, .type3) {
    display: inline-block;
    background-color: transparent;

    &:is(.type1, .type3) {
        --_color: #82FFAD;
    }

    &.type1 {
        --_spacing: 0.2rem;

        margin-inline: calc(-1 * var(--_spacing));
        padding-inline: var(--_spacing);
        background-image: linear-gradient(104deg,
                transparent 0.9%,
                var(--_color) 2.4%,
                color-mix(in srgb, var(--_color), transparent 50%) 5.8%,
                color-mix(in srgb, var(--_color), transparent 90%) 93%,
                color-mix(in srgb, var(--_color), transparent 30%) 96%,
                color-mix(in srgb, var(--_color), transparent 90%) 98%),
            linear-gradient(183deg,
                color-mix(in srgb, var(--_color), transparent 50%) 0%,
                color-mix(in srgb, var(--_color), transparent 70%) 7.9%,
                color-mix(in srgb, var(--_color), transparent 80%) 15%);
        text-shadow: -0.75rem 0.75rem 0.6125rem
                color-mix(in srgb, var(--_color), transparent 30%),
                1.25rem -0.6125rem  0.5rem #FFF,
                -1.125rem -1.6125rem 1.875rem #FFF;
    }

    &:is(.type2, .type3) {
        --_block-spacing: 0.1em;
        --_inline-spacing: 0.4em;

        margin-inline: calc(-1 * var(--_inline-spacing));
        padding: var(--_block-spacing) var(--_inline-spacing);
        border-radius: calc(2 * var(--_inline-spacing)) calc(3 * var(--_block-spacing));
        font-weight: 500;
        background-image: linear-gradient(to right,
                color-mix(in srgb, var(--_color), transparent 90%),
                color-mix(in srgb, var(--_color), transparent 30%) 4%,
                color-mix(in srgb, var(--_color), transparent 70%));
        box-decoration-break: clone;
    }

    &.type2 {
        --_color: #FF0;
    }
}