CSS-Glanzeffekt-Generator
Erzeugen Sie einen Lichtreflex, der diagonal über Ihre Karten wandert
Mit diesem Werkzeug gestalten Sie den beliebten Shine-Effekt, bei dem ein Lichtstreifen über eine Karte oder einen Button gleitet: Sie stellen ihn über Schieberegler ein, sehen ihn sofort in der Vorschau und kopieren den fertigen CSS-Code. Das ist praktisch für Designer und Frontend-Entwickler, die hochwertige Karten-Designs oder auffällige Buttons umsetzen möchten. Alle Berechnungen laufen direkt im Browser, es werden keine Daten an einen Server gesendet.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Stellen Sie Winkel, Geschwindigkeit, Schärfe und Lichtfarbe über die Schieberegler und den Farbwähler nach Wunsch ein.
- Beobachten Sie in der Vorschaukarte in Echtzeit, wie der Glanz diagonal darüberzieht.
- Schalten Sie die Daueranimation ein oder aus und starten Sie den Effekt bei Bedarf über die Abspielen-Schaltfläche erneut.
- Kopieren Sie den fertigen CSS-Code über die Kopieren-Schaltfläche und fügen Sie ihn beim gewünschten Element (::after) ein.
FAQ
- Lässt sich das erzeugte CSS auf jedes beliebige Element anwenden?
- Das Zielelement benötigt zusätzlich position: relative und overflow: hidden, damit der Glanzverlauf nur innerhalb der Karte sichtbar bleibt.
- Kann der Glanz nur beim Überfahren mit der Maus erscheinen?
- Ja. Deaktivieren Sie einfach das Häkchen „Dauerhaft animieren“, dann wird CSS erzeugt, bei dem das Licht ausschließlich beim Hover durchläuft.
- Kann ich mehrere Karten mit jeweils unterschiedlicher Geschwindigkeit versehen?
- Ja. Vergeben Sie pro Karte einen eigenen Klassennamen, erzeugen Sie hier mit unterschiedlichen Werten für Geschwindigkeit und Winkel jeweils eigenes CSS und binden Sie es entsprechend ein.