CSS-Seitenkräusel-Effekt-Generator
Sofort einen gebogenen Papierecken-Effekt per CSS erzeugen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Dieses Tool erzeugt eine umgeklappte Papieroptik an der Ecke einer Karte oder Dokument-UI. Wählen Sie eine von vier Ecken, passen Sie Kräuselgröße, Schattenintensität sowie Karten- und Rückseitenfarbe an, verfolgen Sie die Live-Vorschau und kopieren Sie den fertigen CSS-Code direkt in Ihr Projekt. Alles läuft im Browser, es werden keine Daten an einen Server gesendet.
Anleitung
- Wählen Sie eine Ecke aus den vier Tabs: oben rechts, oben links, unten rechts oder unten links.
- Stellen Sie mit den Reglern Kräuselgröße und Schattendeckkraft nach Wunsch ein.
- Legen Sie Kartenfarbe und Rückseitenfarbe der Kräuselung per Farbwähler oder Texteingabe fest.
- Prüfen Sie die Live-Vorschau und klicken Sie auf 'CSS kopieren', um den fertigen Code zu übernehmen.
FAQ
- Kann ich das generierte CSS direkt in meine Seite einfügen?
- Ja, es ist reines CSS mit einer .curl-card-Klasse und passendem ::before-Pseudoelement-Stil — passen Sie es einfach an den Klassennamen Ihres Elements an.
- Kann ich mehrere Ecken gleichzeitig kräuseln?
- Das Tool erzeugt jeweils Code für eine Ecke. Für mehrere Ecken generieren Sie das CSS für jede Richtung und kombinieren Sie sie unter separaten Klassennamen.
- Funktioniert der Effekt ganz ohne Bild?
- Ja, es ist reines CSS: Ein Hintergrundverlauf schneidet die Ecke diagonal ab, und ein Pseudoelement mit passendem Verlauf und drop-shadow-Filter erzeugt die gefaltete Optik.