Merchan Webdesign
Farbverlauf in Überschriften

Farbverlauf in Überschriften – Elementor

Kurzer Tipp.

Wenn ihr einen Farbverlauf in euren Überschriften haben wollt, dann hilft euch dieser CSS Schnipsel weiter.

selector .elementor-heading-title {
    background-image: linear-gradient(to right,#FF0000 , #F2E705, #00DCFF, #F205B9, #00DCFF); /* du kannst so viele Farben hintereinandersetzen wie du möchtest */
    -webkit-background-clip: text;
    display: inline-block;
    padding: 10px; /* mehr Pixel wählen, falls die Überschrift abgeschnitten wird */
    -webkit-text-fill-color: #00000000;

Im oberen Beispiel siehst du, dass vor den HEX-Codes der Farben „to right“ steht. Das bedeutet, der Farbverlauf folgt von links nach rechts.

Du kannst den Verlauf allerdings etwas anpassen. Hier ein paar weitere Möglichkeiten. 

to right

				
					selector .elementor-heading-title {
    background-image: linear-gradient(to right,#FF0000 , #F2E705, #00DCFF, #F205B9, #00DCFF); /* du kannst so viele Farben hintereinandersetzen wie du möchtest */
    -webkit-background-clip: text;
    display: inline-block;
    padding: 10px; /* mehr Pixel wählen, falls die Überschrift abgeschnitten wird */
    -webkit-text-fill-color: #00000000;
				
			

Die Richtung könnt ihr, wie weiter oben schon erwähnt, mit der Auszeichnung vor den Farben ändern. Probiert ein bisschen rum und ersetzt to right zum Beispiel mit:

				
					to left /* von rechts nach links */ 
to top /* von unten nach oben */ 
to bottom /* von oben nach unten */ 
to right top /* von links unten nach rechts oben */ 
to left top /* von rechts unten nach links oben */ 
				
			

Und so weiter, und so weiter, und so weiter.

Facebook
Twitter
LinkedIn
WhatsApp
Telegram

Fragen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert