Kostenlose CSS & Design-Tools online

Visuelle Generatoren für CSS, Farben, Schatten und Verläufe.

9 Tools

CSS-box-shadow-GeneratorGestalte realistische Schatten, indem du mehrere Ebenen stapelst – wie die besten Designsysteme. Passe Versatz, Unschärfe, Ausdehnung, Farbe und Deckkraft jeder Ebene an und kopiere das Ergebnis als CSS oder Tailwind-Klasse.

Farbkonverter (HEX, RGB, HSL, CMYK, OKLCH)Gib eine Farbe in beliebigem Format ein – #hex, rgb(), hsl(), hwb(), oklch() oder einen Namen wie „tomato“ – und erhalte sofort alle Entsprechungen, den WCAG-Kontrast zu Weiß und Schwarz sowie eine Skala aus Aufhellungen und Abdunklungen.

Farbpaletten-GeneratorGeh von deiner Markenfarbe aus und erhalte eine vollständige, wahrnehmungsgleichmäßige Skala von 50 bis 950 für dein Designsystem – samt harmonischer Kombinationen. Die Originalfarbe bleibt in ihrer passenden Stufe exakt erhalten.

CSS-Farbverlauf-GeneratorGestalte Verlaufshintergründe, indem du Farbstopps entlang einer Leiste ziehst, wähle den Typ (linear, radial oder konisch) und kopiere produktionsreifes CSS mit Fallback-Farbe und moderner OKLCH-Version ohne graue Übergänge.

CSS Grid GeneratorStelle Spalten, Zeilen und Abstände mit Reglern ein und sieh das Ergebnis live. Kopiere CSS und HTML, bereit zum Einfügen in dein Projekt.

Glassmorphism-Generator (Milchglas)Gestalte Karten und Panels aus Milchglas und sieh das Ergebnis sofort auf verschiedenen Hintergründen. Das CSS enthält das -webkit-Präfix, das Safari noch benötigt.

Farbpalette aus Bild extrahierenLade ein Foto, Logo oder eine Illustration hoch und entdecke die Hauptfarben. Wähle die Anzahl der Farben, kopiere jedes HEX per Klick oder die ganze Palette als CSS-Variablen.

Neumorphism-Generator (Soft UI)Neumorphism lässt Elemente mit zwei gegenläufigen Schatten – einem hellen und einem dunklen – aus dem Hintergrund herauswachsen. Passe jeden Parameter an, wähle die Lichtrichtung und kopiere das CSS.

SVG Wellen- und Blob-GeneratorGestalte wellige Abschnittstrenner und einzigartige organische Formen. Passe Punkte, Amplitude und Farben an, generiere neu, bis es gefällt, und kopiere den SVG-Code oder lade ein PNG herunter.