Mehrfarbiger Text mit CSS

Einen Text in CSS mit Farbe zu versehen ist relativ einfach.

Schöner sieht es natürlich immer mit einem “fetten” Font aus, sprich je breiter und massiger der Font desto besser kommt der Effekt zur Geltung.

Folgendes kommt in die style-Tags:

.rainbow {
background-color: #ddd;
background-image: linear-gradient(to bottom, #66f, #66f, #66f, #00f, #e97, #a53, #000, #000);
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}

h1 {
font-size: 34px;
text-shadow: 0px 0px 14px #999;
}

Jetzt noch den passenden Text mit “class” markieren.

Das wars schon, probierts aus, die Farben könnt Ihr im “linear-gradient”-Tag ändern ( #123 ). Ihr könnt auch mehr oder weniger Farben einbringen. Da müsst Ihr ein wenig ausprobieren bis es den gewünschten Effekt hat.

Viel Spass dabei.