juanpastas juanpastas - 4 months ago 22
CSS Question

Striped text in CSS

How can I make text to have a striped color with CSS?

Something like

background-image
or
background-color
applied to text. Or would I have to download a font that is coloured that way?

Answer

Demo: http://jsfiddle.net/LMg7q/2/

.striped{
    font-size: 128px;
    background-size: 16px;
    -webkit-background-clip: text;
    color: transparent;
    background-color: #AC0;
    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, .3) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .3) 75%, transparent 75%, transparent);
}