Drehbuch-Assistent▸ 
AI Apps 
AI Nachrichten 
uiGradients: Eine Open-Source-Gradientensammlung für Designer und Entwickler
uiGradients: Eine Open-Source-Gradientensammlung für Designer und EntwicklerEinführung
uiGradients ist eine Open-Source-Sammlung von Farbverläufen für Designer und Entwickler mit vielen fertigen linearen und radialen Verläufen. Man kann sie online ansehen, den CSS-Code kopieren und sie über gradients.json im Code aufrufen. So lassen sie sich schnell auf Webseiten, in Apps oder im Printdesign einsetzen.
Die wichtigsten Merkmale von uiGradients
Einfache Bedienung: Wähle einen Verlauf aus, und oben rechts kannst du den Code kopieren oder das Bild herunterladen.
Unterstützung mehrerer Formate: Exportiert werden CSS, SCSS, LESS, Stylus, Swift und Android XML, sodass Entwickler mit unterschiedlichen Technologien direkt loslegen können.
Gemeinschaftliche Pflege: Alle Verläufe sind in gradients.json im GitHub-Repository gespeichert. Jedes kann das Projekt forken und neue Farbpaletten hinzufügen; nach erfolgreichem Merge ist sie ans Netz.
Zahlreiche Ergänzungen: Es gibt bereits verwandte Projekte wie eine iOS-Erweiterung, React-Komponenten, eine SCSS-Version und Handlebars-Helfer, mit denen sich der Einsatz in verschiedenen Projekten beschleunigen lässt.
Kostenlos und Open Source: Lizensiert unter MIT, darf kommerziell genutzt und verändert werden, solange der Copyright-Hinweis des Originalautors erhalten bleibt.
Anwendungsfälle für uiGradients
Für Hintergründe, Buttons, Navigationsleisten, Karten und andere auffällige Bereiche auf Webseiten oder in Apps;
Um eine Marken-Haupt- oder -Sekundärfarbe zu finden und Farbkombinationen schnell auszuprobieren;
Beim Erstellen von Präsentationen, Postern, Social-Media-Grafiken und anderen Printdesigns, um Verläufe einzufügen;
Als Referenz beim Lernen von Farbtheorie, um zu sehen, welche Verläufe aktuell im Trend liegen.
So verwendest du uiGradients (am Beispiel Web)
1. Öffne die offizielle Webseite von uiGradients, klicke in der linken Liste auf einen beliebigen Verlauf, und auf der rechten Seite wird er sofort in der Vorschau angezeigt.
2. Wähle oben rechts „Copy CSS“, um einen ähnlichen Code wie diesen zu erhalten:
background: linear-gradient(to right, #ff416c, #ff4b2b);
3. Füge ihn in dein Stylesheet oder einen Inline-style ein, speichere und lade neu – schon siehst du das Ergebnis.
Tipps und Tricks für uiGradients
Wenn du auf gut Glück Inspiration brauchst, hänge an die URL ein #random an, um zu einem zufälligen Verlauf zu springen.
Auch auf Smartphone und Tablet nutzbar: Die Seite passt sich der Bildschirmgröße an, wähle einfach einen Verlauf aus und kopiere den Code.
Verwende es zusammen mit anderen Farb-Tools wie Color Hunt oder Mesh Gradients, um komplexere Farbkombinationen zu gestalten.
