CSS-Glanzeffekt-Generator
Diagonalen Glanz-Sweep für Karten und Buttons erstellen
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool lässt sich per Schieberegler Winkel, Geschwindigkeit, Deckkraft und Farbe eines diagonalen Glanz-Effekts für Karten oder Buttons einstellen und live in der Vorschau prüfen, bevor der fertige CSS-Code kopiert wird. Es eignet sich für Designer und Frontend-Entwickler, die hochwertig wirkende UI-Elemente gestalten wollen, und läuft komplett im Browser, ohne Daten an einen Server zu senden.
Anleitung
- Winkel, Dauer, Deckkraft und Glanzfarbe über die Schieberegler und den Farbwähler anpassen.
- In der Vorschaukarte den diagonalen Lichtstreifen live beobachten.
- Dauerhafte Animation ein- oder ausschalten und bei Bedarf mit Abspielen erneut auslösen.
- Den generierten CSS-Code kopieren und auf das ::after-Pseudoelement des Zielelements anwenden.
FAQ
- Kann ich das CSS auf jedes beliebige Element anwenden?
- Das Zielelement benötigt position: relative und overflow: hidden, damit der Glanzverlauf innerhalb der Kartengrenzen bleibt.
- Kann der Glanz nur beim Hover erscheinen?
- Ja, wenn 'Dauerhaft animieren' deaktiviert wird, entsteht CSS, das den Glanz nur bei Hover auslöst.
- Kann ich für mehrere Karten unterschiedliche Geschwindigkeiten nutzen?
- Ja, vergeben Sie jeder Karte einen eigenen Klassennamen und erzeugen Sie hier für jede eine eigene CSS-Variante mit anderer Dauer.