KI-CSS-Snippets-Guide
Beschreibe den gewünschten Effekt und dieses Tool findet passendes CSS aus einer Bibliothek von 100 kuratierten Snippets — Buttons, Karten, Ladeanzeigen, Animationen, Hover-Effekte, Texteffekte, Navigation, Formulare, Badges und Utilities. Dasselbe MiniLM-Netz wie in unseren KI-Tools gleicht deine Beschreibung semantisch ab und rendert jedes Ergebnis live.
Jedes Snippet ist ein eigenständiges CSS-Muster in Produktionsqualität mit ausschließlich Standard-Eigenschaften — keine Frameworks, keine Abhängigkeiten. Kopiere das CSS direkt in dein Stylesheet oder nutze es als Ausgangspunkt. Die Live-iframe-Vorschau zeigt exakt das Rendering.
Pro Tips
- Beschreibe das visuelle Ergebnis, nicht den Eigenschaftsnamen. „Glänzender Button mit Lichtstreifen" findet bessere Treffer als „Pseudoelement".
- Kombiniere Snippets: nimm den Hover-Effekt von einem, die Farben von einem anderen und das Layout von einem dritten. Snippets sind Bausteine.
Frequently Asked Questions
Q: Ist das echte KI?
Ist das echte KI? Ja. Die Seite führt das all-MiniLM-L6-v2-Embedding-Modell über ONNX Runtime Web aus und gleicht deine Beschreibung per semantischer Ähnlichkeit mit den Snippets ab — vollständig in deinem Browser.
Q: Kann ich diese Snippets kommerziell nutzen?
Kann ich diese Snippets kommerziell nutzen? Ja, ohne Einschränkung. Alle Snippets sind Originalcode mit Standard-CSS-Eigenschaften, kostenlos für jedes Projekt.
Q: Brauchen die Snippets JavaScript?
Brauchen die Snippets JavaScript? Nein. Fast alle sind reines CSS — Animationen, Hover-Zustände, Ladeanzeigen und Schalter nutzen nur CSS. Einige interaktive Zustände (wie der Ripple) funktionieren mit :active ohne JS.
Q: Wie sehe ich Vorschau und kopiere?
Wie sehe ich Vorschau und kopiere? Jedes Ergebnis zeigt eine Live-iframe-Vorschau plus das vollständige CSS in einem Codeblock. Klicke auf den Block oder den Kopier-Button.
Q: Was, wenn das Modell nicht lädt?
Was, wenn das Modell nicht lädt? Ein Schlüsselwort-Matcher übernimmt automatisch, und du kannst alle 100 Snippets über das Panel durchsuchen, das sich beim Fokussieren des Eingabefelds öffnet.
Bauhaus-Farben
Die Bauhaus-Schule definierte die moderne Farbtheorie: Primärfarben als Werkzeuge, klare Kontraste statt Ornamente. Diese Palette zitiert die ikonischen Farben von Weimar, Dessau und der deutschen Designgeschichte.
Bauhaus Rot #BE1E2DDas ikonische Rot der Bauhaus-Plakate und Drucksachen
Bauhaus Gelb #FFDE17Das leuchtende Gelb der Bauhaus-Ästhetik
Bauhaus Blau #00509EDas tiefe Blau des Bauhaus-Farbkreises
Ultramarin #120A8FHistorisches Pigment aus Lapislazuli, von Goethe beschrieben
Ocker #C78B2CErdpigment der deutschen Renaissance-Malerei
Petrol #006D7CDas Blaugrün der Nachkriegszeit und des Mid-Century-Designs
Lindgrün #7CBA3DDas frische Grün der Frühlingslinden
Ziegelrot #B22222Die roten Ziegeldächer der Altstädte
Graphit #38383ADer dunkle Grauton der Zeichenkunst und des Industriedesigns
Weiß #F4F4F4Das Weiß der Bauhaus-Wände — Raum und Licht
Q: Was sind Bauhaus-Farben?
Was sind Bauhaus-Farben? Die Bauhaus-Farben sind die Primärfarben Rot (#BE1E2D), Gelb (#FFDE17) und Blau (#00509E) sowie Schwarz und Weiß. Die Schule (1919-1933) nutzte sie als systematische Farbenlehre statt dekorativer Ornamente.
Q: Was ist Ultramarin?
Was ist Ultramarin? Ultramarin (#120A8F) ist ein historisches blaues Pigment, ursprünglich aus dem Halbedelstein Lapislazuli gewonnen. Es war teurer als Gold und wurde für Madonnen-Mäntel in der Renaissance reserviert.