CSS-Verläufe erzeugen
Einen linearen, radialen oder konischen CSS-Verlauf mit 2 bis 8 Farbstopps gestalten, live ansehen und das fertige CSS kopieren.
- Läuft im Browser
- Kein Upload
- Ergebnis bleibt auf deinem Gerät
Datenschutz & GrenzenLäuft in deinem Browser. Nichts wird hochgeladen.
Eingabeinhalte bleiben in diesem Tab; Refentra lädt sie nicht hoch und speichert sie nicht. Optionale aggregierte Aktionszahlen werden nur mit deiner Einwilligung zur Nutzungsmessung gesendet. Leere den Arbeitsbereich anschließend.
Unterstütztes Profil: 2–8 opake sRGB-HEX-Stops, aufsteigend 0–100%; linear/radial/konisch, Vorschau und CSS.
Maximal 200.000 UTF-16-Einheiten; Parserlimits können kleiner sein. Worker: 15 Sekunden (Regex 1,5 Sekunden).
Eingabe und Ergebnis nachvollziehen
- Vorbereiten und Vorgang wählen
Wähle einen linearen, radialen oder konischen Verlauf. Gib die Farbstopps der Reihe nach an und einen Winkel, der zum Typ passt.
- Ein konkretes Beispiel prüfen
Nutze dieses Beispiel und vergleiche das angegebene Ergebnis: linear, angle=90, colors="#000000,#ffffff", positions="0,100" → linear-gradient(90deg, #000000 0%, #ffffff 100%)
- Ausgabe vor dem Übernehmen prüfen
Übernimm den erzeugten CSS-Wert in die Hintergrund-Deklaration, die du brauchst. Sieh dir den Verlauf in der tatsächlichen Größe des Elements an.
Antworten zu dieser Aufgabe
Bleibt der Kontrast des Textes überall erhalten?
Nein. Der Kontrast ändert sich über die Fläche. Prüfe den schwächsten Hintergrund hinter jedem Textbereich und nicht nur die Endfarben.
Was prüfe ich bei einem Eingabefehler?
Verwende 2–8 deckende Hex-Farben mit aufsteigenden Positionen von 0–100. Ordne die Stopps selbst, statt dich darauf zu verlassen, dass der Browser sie korrigiert.
Wo sind die Grenzen dieses Werkzeugs?
Erzeugt wird ein CSS-Wert für den Hintergrund, kein Bildexport und kein animierter Verlauf. Dass er auf allen Bildschirmen gleich aussieht, ist nicht belegt.