CSS-Verlaufsgenerator
Erstellen Sie einen linearen oder radialen Hintergrund, passen Sie Farben an und kopieren Sie das CSS. Vorschauhintergrund und -größe sind nicht im Code enthalten.
Verlauf erstellen
- Wählen Sie Linear und einen Winkel oder Radial mit Form, Ausdehnung und Mittelpunkt.
- Bearbeiten Sie Farbe, Deckkraft und Position jedes Punkts. Halten Sie die Reihenfolge ein; gleiche Positionen erzeugen eine scharfe Kante. Fügen Sie Punkte hinzu oder duplizieren Sie sie.
- Prüfen Sie Vorschau und CSS und kopieren Sie die Deklaration oder laden Sie gradient.css herunter. Wechseln Sie den Vorschauhintergrund, um Transparenz zu beurteilen.
Bedienelemente verstehen
Der lineare Winkel 0° zeigt nach oben, 90° nach rechts. In einem breiten und einem quadratischen Feld kann der Verlauf anders aussehen.
Ein radialer Verlauf breitet sich vom Mittelpunkt aus. Form und Ausdehnung bestimmen die Lage des 100-%-Punkts.
Die Deckkraft ist von der RGB-Farbe getrennt. Der Code behält den exakten Prozentwert und wählt sRGB ausdrücklich; der Vorschauhintergrund wird nicht exportiert.
Verwenden Sie Punkt oder Komma und höchstens eine Dezimalstelle. Positionen müssen aufeinander folgen. Der Editor nutzt 2–8 Punkte, nicht alle CSS-Funktionen.
Beispiele
Für einen Verlauf von links nach rechts wählen Sie Linear mit 90°, Rot bei 0 % und Blau bei 100 %.
Für eine scharfe Kante setzen Sie unterschiedliche Farben auf dieselbe Position. Die Reihenfolge bestimmt den Übergang.
Für einen auslaufenden radialen Hintergrund wählen Sie einen Kreis und 0 % Deckkraft für die äußere Farbe. Prüfen Sie helle und dunkle Hintergründe; diese werden nicht exportiert.
Grenzen der Vorschau
Der Generator erstellt einen linearen oder radialen sRGB-Verlauf. Er importiert kein beliebiges CSS und erstellt keine konischen, wiederholten, Gitter-, Bild- oder animierten Hintergründe.
Ein Browser ohne Unterstützung der expliziten Syntax zeigt keine Vorschau, der Code bleibt kopierbar. Es wird kein anderer Verlauf untergeschoben.
Abmessungen, Hintergrund, Browser und Bildschirm beeinflussen das Aussehen. Identische Pixel, Kontrast oder Druckfarbkalibrierung werden nicht garantiert.
Manche radialen Mittelpunkte und nahen Ausdehnungen ergeben einen degenerierten Verlauf. Ungültige aktive Eingaben entfernen das aktuelle Ergebnis.
Ihr Verlauf bleibt auf der Seite
Bearbeitung und Codeerzeugung erfolgen auf der Seite, ohne Werte hochzuladen. Entwürfe werden nicht gespeichert. Kopieren und Download erfolgen nur auf Ihre Wahl; die allgemeine Datenschutzerklärung der Website gilt weiterhin.
Fragen zu CSS-Verläufen
Quellen und Methode
Die CSS-Spezifikationen beschreiben Verlaufsgeometrie, Farbinterpolation und Serialisierung.
- W3Cw3.orgCSS Images 3Winkel, Farbpunkte und radiale Geometrie.
- W3Cw3.orgCSS Images 4Verlaufssyntax und Interpolationsmethoden.
- W3Cw3.orgCSS Color 4Farbinterpolation und vormultipliziertes Alpha.
- W3Cw3.orgCSSOMSerialisierung von CSS-Werten.
Eine Dezimalstelle ist eine Entscheidung dieses Editors. Diese Dokumente bescheinigen weder Browserunterstützung noch Darstellungsgenauigkeit.
Ähnliche Werkzeuge
SVG in PNG
Wandle eine lokale SVG-Datei oder eingefügten Code in PNG um, mit festgelegten Abmessungen, Transparenz und mitgelieferten Schriften.
Werkzeug öffnen — SVG in PNGCSS-Filter-Generator
Ordne und wiederhole CSS-Effekte, vergleiche ein Beispiel und kopiere die genaue Deklaration.
Werkzeug öffnen — CSS-Filter-GeneratorRechner für fließende Schriftgrößen
Legen Sie Schriftgrößen für zwei Ansichtsbreiten fest. Kopieren Sie das CSS mit wurzelbezogenen Einheiten und prüfen Sie das Modell anhand derselben ausgegebenen Koeffizienten.
Werkzeug öffnen — Rechner für fließende SchriftgrößenCSS-Schaltflächengenerator
Gestalte native Schaltflächenzustände, prüfe den Tastaturfokus und kopiere HTML und CSS.
Werkzeug öffnen — CSS-SchaltflächengeneratorCSS-Border-Radius-Generator
Bearbeite acht Eckradien, prüfe die Vorschau und kopiere CSS in Pixeln oder Prozent.
Werkzeug öffnen — CSS-Border-Radius-GeneratorCSS-Grid-Generator
Erstelle ein CSS-Grid-Beispiel mit Tracks, Platzierung und benannten Bereichen. Vorschau ansehen, CSS oder HTML kopieren und das vollständige Beispiel herunterladen.
Werkzeug öffnen — CSS-Grid-GeneratorCSS-Flexbox-Generator
Erstellen Sie ein Flexbox-Beispiel mit Container- und Elementsteuerelementen, expliziten Layoutachsen, passendem CSS und HTML und einem lokalen vollständigen Beispiel-Download.
Werkzeug öffnen — CSS-Flexbox-GeneratorCSS-Textschatten-Generator
Erstelle geordnete Textschatten, prüfe einfachen Text und kopiere exaktes CSS.
Werkzeug öffnen — CSS-Textschatten-GeneratorCSS Transformationsgenerator
Erstellen Sie wiederholbare 2D-CSS-Transformationen, bearbeiten Sie px oder prozentuale Übersetzung und Ursprung, überprüfen Sie eine Referenzbox und kopieren Sie die genauen aktuellen Deklarationen.
Werkzeug öffnen — CSS TransformationsgeneratorCSS-Boxschatten-Generator
Erstellen Sie geordnete box-shadow-Ebenen, betrachten Sie die Vorschau und kopieren Sie den CSS-Code.
Werkzeug öffnen — CSS-Boxschatten-GeneratorBild-Wasserzeichen
Fügen Sie Bildern Text oder ein Logo hinzu, prüfen Sie die Ergebnisse und laden Sie einzelne Dateien oder eine ZIP-Datei herunter.
Werkzeug öffnen — Bild-WasserzeichenFarbkonverter
Konvertiere unterstützte sRGB-HEX-, RGB- und HSL-Werte mit Alpha und ausgewiesener Genauigkeit.
Werkzeug öffnen — FarbkonverterBild in Text (OCR)
Erkenne gedruckten Text aus lokalen PNG- oder JPEG-Bildern, wähle die Sprache und prüfe oder korrigiere das Ergebnis vor dem Kopieren oder Herunterladen.
Werkzeug öffnen — Bild in Text (OCR)QR-Code aus Bild lesen
Lesen Sie einen QR-Code aus einem lokalen PNG oder JPEG und prüfen Sie Text oder Bytes, ohne Links zu öffnen.
Werkzeug öffnen — QR-Code aus Bild lesenFarbkontrast prüfen
Vergleiche Vordergrund- und Hintergrundfarben, ändere die Deckkraft und prüfe numerische WCAG-Kontrastwerte für Text und wichtige Oberflächendetails.
Werkzeug öffnen — Farbkontrast prüfenRechner für Druckgröße und Auflösung
Berechnen Sie Druckgröße, benötigte Pixel und effektive PPI beim Einpassen oder Beschneiden.
Werkzeug öffnen — Rechner für Druckgröße und AuflösungSeitenverhältnis-Rechner
Berechne das Verhältnis von Breite zu Höhe oder neue Pixelmaße anhand einer vorgegebenen Seite.
Werkzeug öffnen — Seitenverhältnis-RechnerBilder komprimieren
Versuche, JPEG, PNG oder WebP auf eine Zieldateigröße zu bringen – mit gemessenem Ergebnis und optional kleineren Abmessungen.
Werkzeug öffnen — Bilder komprimierenHEIC in JPG
Wandle unterstützte HEIC-Fotos lokal in JPG-Dateien mit voller Auflösung um, wähle Qualität und Hintergrund und lade geprüfte Ergebnisse einzeln oder als ZIP herunter.
Werkzeug öffnen — HEIC in JPGBildkonverter
Wandle PNG-, JPEG- und WebP-Bilder lokal um, stelle Transparenz, Hintergrund und Qualität ein und lade die Ergebnisse herunter.
Werkzeug öffnen — BildkonverterFotocollage erstellen
Ordne lokale Fotos in einem Raster an und lade ein PNG oder JPEG herunter.
Werkzeug öffnen — Fotocollage erstellenBilder drehen und spiegeln
Drehe oder spiegle einen lokalen Stapel statischer PNG-, JPEG- und WebP-Bilder und lade die geprüften Ergebnisse herunter.
Werkzeug öffnen — Bilder drehen und spiegelnBild zuschneiden
Schneide ein lokales JPEG-, PNG- oder WebP-Bild pixelgenau zu und lade es als PNG oder JPEG herunter.
Werkzeug öffnen — Bild zuschneidenBildgröße ändern
Ändere die Größe eines JPG-, PNG- oder WebP-Bildes nach Pixeln oder Prozent, prüfe die Vorschau und lade es herunter.
Werkzeug öffnen — Bildgröße ändern