So funktioniert es
- Wähle den Tab Verlauf oder Button.
- Passe die Regler an und beobachte die Live-Vorschau: Farben, Winkel und Typ bei einem Verlauf, Text, Farben, Innenabstand und Eckenradius bei einem Button.
- Klicke auf das Kopieren-Symbol über dem Codeblock und füge das CSS in dein Stylesheet ein.
Der Tab Verlauf baut einen Hintergrund aus zwei Farben. Du kannst zwischen einem linearen und einem radialen Verlauf wählen. Für lineare Verläufe gibt es einen Winkelregler von 0 bis 360 Grad. Die radiale Option erzeugt einen kreisförmigen Verlauf von der ersten zur zweiten Farbe. Der Code unter der Vorschau ist eine einzelne background-Deklaration, zum Beispiel ein linear-gradient mit einem Winkel und zwei Farbstopps, bereit zum Einfügen.
Der Tab Button gibt eine vollständige Regel für eine Klasse namens custom-button aus. Du legst den Beschriftungstext für die Vorschau, die Hintergrundfarbe, die Textfarbe, den horizontalen und vertikalen Innenabstand (jeweils 0 bis 100 px) und den Eckenradius (0 bis 50 px) fest. Das erzeugte CSS enthält die gewählten Farben, den Innenabstand und den Radius sowie keinen Rahmen, einen Zeiger-Cursor, mittlere Schriftstärke, einen kurzen Deckkraft-Übergang und eine Hover-Regel, die die Deckkraft leicht senkt.
Farben kannst du mit dem Farbwähler auswählen oder als Text eingeben. Die Ausgabe ist reines CSS ohne Vendor-Präfixe und ohne Framework, sodass du es in jedem Projekt verwenden und weiter bearbeiten kannst. Verläufe mit mehr als zwei Farbstopps unterstützt dieses Tool nicht.
Nichts wird an einen Server gesendet. Vorschau und Code werden beim Tippen in deinem Browser erzeugt.
Häufige Fragen
Kann ich einen Verlauf mit drei oder mehr Farben erstellen?
Nein. Dieses Tool nutzt zwei Farben. Weitere Stopps kannst du durch Bearbeiten des kopierten CSS hinzufügen.
Was macht der Winkelregler?
Bei linearen Verläufen legt er die Richtung in Grad fest. Bei radialen Verläufen, die immer kreisförmig sind, ist er ausgeblendet.
Wie heißt die Klasse im Button-CSS?
Die erzeugte Regel verwendet die Klasse custom-button, die du passend zu deinem Projekt umbenennen kannst.
Fügt es dem Button einen Hover-Stil hinzu?
Ja. Das kopierte CSS enthält eine Hover-Regel, die die Deckkraft auf 0.9 setzt.
Wird etwas von meiner Eingabe hochgeladen?
Nein. Das CSS wird in deinem Browser erzeugt.