Curve Studio – Interaktiver Kurven-Designer

Form & Größe

Passe die Beispielseite live an. Alle Werte werden direkt in den exportierbaren Code übernommen.

Gesamte Fläche

Gesamtbreite1240 px

Maximalbreite des Layouts (sichtbare Breite passt sich dem Vorschaufenster an).

Flächenhöhe390 px

Höhe des weißen Inhaltsbereichs, unabhängig von der Kurve.

Hero-Höhe310 px

Höhe des oberen, farbigen Bereichs.

Content & Position

Content-Breite830 px

Maximale Breite des Contents; die Kurven folgen dieser Breite.

Content vertikal verschieben36 px

Nach links = weiter nach oben, nach rechts = weiter nach unten.

Abstand der Kurven zum Content28 px

Fixer Abstand zwischen Content-Kante und Kurvenplateau.

Aktuell sichtbare Content-Breite830 px

Content-Begrenzung anzeigen (nur Vorschau)

S-Kurven

Kurvenhöhe108 px

Kurvenbreite je Seite180 px

Feste Geometrie, kein Zusammenstauchen.

Rundungsradius100 px

Steuert die weiche Bézier-Rundung.

Die Kurven bleiben stets im selben Abstand zum Content und werden auf kleinen Displays am Rand abgeschnitten. Die Kurven behalten ihre festen Maße und folgen dem Content-Container. Überstehende Flanken werden seitlich abgeschnitten. Die Vorschau zeigt echte 100 %; der Export bleibt ohne JavaScript responsive.

Live-Vorschau

1240 px Breite · 100 % Ansicht

Beispielseite

Beispiel-Link

Designvorschau

Sanfte Übergänge im Layout

Beispielkategorie

Überschrift als Platzhalter

Dieser Text dient ausschließlich dazu, die Wirkung der abgerundeten Übergänge in einer typischen Inhaltsseite darzustellen. Sämtliche Elemente sind frei erfunden.

Information 01Information 02Information 03