CSS- & Design-Tools
Visuelle Generatoren und Rechner für Frontend- und Webflow-Entwickler.
localKlemmenrechnerGib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen…localCSS Hover-Animation GeneratorGestalte Hover-Animationen für Buttons, Karten, Links und Icons. Wähle einen Effekt, probiere ihn auf…localCSS Keyframes GeneratorEin visueller Editor für @keyframes. Füge Keyframes auf einer Zeitleiste hinzu, lege an jedem Schritt…localCSS-Animation-GeneratorGestalte CSS-Animationen auf einer echten Keyframe-Timeline. Starte mit über 50 Vorlagen, springe durch…localCubic-Bezier-GeneratorForme eine Easing-Kurve, indem du zwei Griffe ziehst, und lass sie gegen Standard-Easings antreten.…localCSS-Loader-GeneratorWähle einen von 13 Lade-Spinnern in reinem CSS, passe Größe, Farben, Dicke und Tempo an und kopiere…localCSS Verlauf GeneratorGestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.…localBox-Shadow-GeneratorStapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer…localPX zu REM UmrechnerRechne zwischen Pixeln, rem und em mit deiner eigenen Root-Schriftgröße um – oder füge ein ganzes…localSVG zu JSX KonverterFüge ein SVG aus Figma, Illustrator oder einem Icon-Set ein und erhalte eine fertige React-Komponente (JSX…localSVG zu CSS KonverterFüge ein SVG ein und erhalte eine kompakte, URL-kodierte Data URI sowie fertiges background-image- und…localCSS Grid GeneratorLege die Spalten, Zeilen und den Abstand fest und ziehe über Zellen, um Bereiche wie Header, Sidebar und…localBorder-Radius GeneratorRunde die Ecken beliebiger Boxen ab: Zieh einen Regler für alle Ecken oder stell jede Ecke einzeln ein,…localCSS-Filter-GeneratorPasse Blur, Helligkeit, Kontrast, Sättigung, Farbton, Graustufen, Sepia, Invertieren und Schlagschatten an…localCSS Clip-path GeneratorSchneide Bilder und Elemente in beliebige Formen: Wähle eine von 15 Startformen — Dreieck, Sechseck,…localCSS-Mask-GeneratorLass Bilder und Bereiche sanft ausblenden, statt hart abzuschneiden: eine Kante ausblenden, oben und…localCSS Dreieck GeneratorErstelle ein reines CSS-Dreieck für einen Tooltip-Pfeil, ein Dropdown-Caret oder eine Sprechblase: Wähle…localSVG Blob GeneratorErstelle glatte, organische Blob-Formen für Hero-Hintergründe, Avatare und Illustrationen. Stelle die…localSVG Wellen GeneratorGestalte wellige Abschnitts-Trenner für Landingpages: Wellen hinzufügen oder entfernen (bis zu 6, jeweils…localCSS Flexbox GeneratorSieh genau, was jede Flexbox-Eigenschaft bewirkt: Lege Richtung, Umbruch, justify-content, align-items und…localSchriftgrößen-Skala GeneratorWähle eine Basisschriftgröße und ein Verhältnis — Kleine Terz, Große Terz, Quarte, Goldener Schnitt — und…localSVG Muster GeneratorGib Sektionen und Karten eine dezente Textur mit nahtlosen SVG-Mustern: Punkte, Raster, diagonale Linien,…localCSS-Button-GeneratorGestalte einen Button, der in jedem Zustand gut aussieht. Starte mit einer Vorlage – Vollfarbe, Outline,…localCSS Bildränder weichzeichnenGib Fotos und Hero-Bildern mit einer einzigen CSS-Regel weiche, ausgeblendete Ränder — ganz ohne…localCSS Vignette GeneratorFüge einem Foto, einer Karte oder einem Hero-Bereich eine Vignette hinzu, also einen weichen, runden…localBild-FormmaskeFüge jedes Foto in eine Form ein, etwa Stern, Herz, Sechseck, Kreis, Pfeil oder Sprechblase, und zwar mit…localSection Divider GeneratorGib Abschnitten deiner Landingpage mit einer einzigen CSS-Regel schräge, gebogene, Pfeil-, Wellen-,…localSchräge Section CSSBaue schräge, angewinkelte oder diagonale Abschnitte – der klassische Landingpage-Look – mit einer…localGewölbte AbschnittstrennungRunde die Kante eines Heroes oder Abschnitts mit einer Kurve ab – konvex, nach innen gewölbt, als…localZackenrand CSSSchneide eine Zickzack-, Sägezahn-, Wellen- oder Stufenkante in Sektionen, Karten, Gutscheine und…localPartikel-Animation GeneratorFüge jeder Seite fallenden Schnee, Regen, Sternschnuppen, Konfetti, Blüten, Herbstblätter, Herzen oder…localCSS-SchneeeffektLass es auf deiner Website zur Weihnachtszeit schneien: sanfter Schnee oder Schneeflocken, leichtes…localCSS-Regen-AnimationLass es auf einer Seite oder einem Hero-Bereich regnen — von leichtem Nieselregen bis zu einem schrägen…localFalling Stars AnimationLass Sternschnuppen über einen Nachthimmel-Hero flitzen oder Sternformen herabschweben und sich drehen.…localKonfetti-Animation CSSFeiere einen Launch, eine Anmeldung oder einen Geburtstag mit fallendem Konfetti, das in gemischten Farben…localCSS zu Tailwind ConverterFüge CSS-Regeln oder Deklarationen ein und erhalte für jeden Selektor die passenden…localGlassmorphism GeneratorGestalte eine Milchglas-Karte mit Live-Reglern und kopiere browserübergreifendes CSS – mit dem…localTailwind Arbitrary Values GeneratorFüge CSS ein und erhalte die Bracket-Syntax von Tailwind direkt richtig – Leerzeichen werden zu…localSVG ViewBox SkaliererIcons auf eine neue viewBox (z. B. 24×24) normalisieren, indem du die tatsächlichen Koordinaten jedes…localSVG-Icon-FinderDurchsuche über 70.000 Open-Source-SVG-Icons – Lucide, Tabler, Heroicons, Phosphor, Bootstrap, Material…localSCSS zu CSS CompilerFüge SCSS oder eingerücktes Sass ein und erhalte reines CSS, kompiliert von der offiziellen…localLESS zu CSS CompilerFüge deinen Less-Code ein und erhalte reines CSS, kompiliert von der offiziellen Less.js-Engine direkt in…localHTML zu JSX KonverterFüge HTML ein – ein Snippet, ein Template oder ein SVG-Icon – und erhalte JSX, das du direkt in eine…localSlider- & Karussell-GeneratorKarussells per Klick konfigurieren, statt die Doku zu wälzen: Bibliothek wählen, Breakpoints, Effekte und…localSwiper Slider GeneratorKonfiguriere Swiper 11 mit einem visuellen Editor – responsive Breakpoints, Effekte, Autoplay,…localSplide Slider GeneratorBaue ein barrierefreies, schlankes Splide-Karussell, ohne die Doku zu wälzen. Stell die Optionen ein, prüf…localGlide.js Slider GeneratorErstelle ein schlankes Glide.js-Karussell, den nur etwa 7 KB großen Slider ohne Abhängigkeiten, mit…localSlick Slider GeneratorKonfiguriere den klassischen jQuery-Slick-Carousel (Responsive-Einstellungen, Center-Modus, Fade,…
Fehlt dir ein CSS-Tool?
Sag uns, was du brauchst — die meistgewünschten Tools bauen wir zuerst, kostenlos.