Outils CSS & design
Générateurs visuels et calculatrices pour développeurs front-end et Webflow.
localCalculateur de colliers de serrageSaisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une…localGénérateur d'animations CSS au survolConcevez des animations au survol pour boutons, cartes, liens et icônes. Choisissez un effet, testez-le…localGénérateur Keyframes CSSUn éditeur visuel pour @keyframes. Ajoutez des images clés sur une timeline, définissez transformations,…localGénérateur d’animation CSSConcevez vos animations CSS sur une vraie timeline de keyframes. Partez de plus de 50 préréglages,…localGénérateur Cubic BezierFaçonnez une courbe d'accélération en faisant glisser deux poignées et comparez-la aux easings standard.…localGénérateur de loader CSSChoisissez parmi 13 spinners de chargement en CSS pur, ajustez la taille, les couleurs, l’épaisseur et la…localGénérateur de dégradé CSSConcevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type,…localGénérateur d’ombres CSSEmpilez plusieurs couches d’ombre, ajustez les décalages, le flou, l’étalement et l’opacité sur une carte…localConvertisseur PX en REMConvertissez entre pixels, rem et em avec votre propre taille de police racine, ou collez une feuille de…localSVG vers JSXCollez un SVG issu de Figma, Illustrator ou d’une bibliothèque d’icônes et obtenez un composant React (JSX…localConvertisseur SVG vers CSSCollez un SVG pour obtenir une data URI compacte encodée en URL, ainsi que les règles CSS prêtes à…localGénérateur CSS GridDéfinissez les colonnes, lignes et espacements, puis tracez sur les cellules pour créer des zones comme…localGénérateur border-radiusArrondissez les coins de n'importe quel élément : utilisez un seul curseur pour tous les coins, ou réglez…localGénérateur de filtre CSSAjustez le flou, la luminosité, le contraste, la saturation, la teinte, les niveaux de gris, le sépia,…localGénérateur clip-path CSSDécoupez images et éléments en n'importe quelle forme : choisissez l'une des 15 formes de départ…localGénérateur de masque CSSFaites disparaître en fondu les images et les sections au lieu de les couper net : estompez un bord, le…localGénérateur triangle CSSCréez un triangle en CSS pur pour une flèche d'infobulle, un caret de menu déroulant ou une bulle de…localGénérateur de blobs SVGCréez des formes organiques lisses pour les arrière-plans de bannière, les avatars et les illustrations.…localGénérateur de vagues SVGConcevez des séparateurs de sections ondulés pour vos pages d'accueil : ajoutez ou retirez des vagues…localGénérateur Flexbox CSSVisualisez précisément l'effet de chaque propriété flexbox : définissez la direction, le retour à la…localGénérateur d’échelle typographiqueChoisissez une taille de police de base et un ratio (seconde mineure, tierce majeure, quarte juste, nombre…localGénérateur de motifs SVGDonnez une texture discrète à vos sections et cartes avec des motifs SVG sans couture : points, grilles,…localGénérateur de boutons CSSConcevez un bouton qui rend bien dans chaque état. Partez d'un préréglage — plein, contour, fantôme,…localDégradé des bords d'image en CSSDonnez à vos photos et images d'en-tête des bords doux et estompés avec une seule règle CSS, sans retouche…localGénérateur de vignette CSSAjoutez une vignette — un fondu doux et arrondi sur les bords — à vos photos, cartes et sections héros…localMasque de forme d'imagePlacez une photo à l'intérieur d'une forme — étoile, cœur, hexagone, cercle, flèche, bulle de dialogue… —…localGénérateur de séparateur de sectionDonnez à vos sections de page d’accueil des bords inclinés, courbes, en flèche, en vague, en zigzag ou…localSection inclinée CSSCréez des sections inclinées, en biais ou en diagonale, le style classique des pages d'atterrissage, avec…localSéparateur de section courbeArrondissez le bord d'un hero ou d'une section avec une courbe — convexe, creusée, un angle courbé, une…localGénérateur de bordure zigzag CSSDécoupez un bord en zigzag, en dents de scie, festonné ou en escalier sur vos sections, cartes, coupons et…localGénérateur de particulesAjoutez de la neige qui tombe, de la pluie, des étoiles filantes, des confettis, des pétales, des feuilles…localEffet neige CSSFaites neiger votre site pour les fêtes : neige douce ou flocons, légères bourrasques ou tempête. Copiez…localAnimation pluie CSSFaites pleuvoir sur une page ou une section héros, d'une fine bruine à une averse inclinée. Les gouttes…localAnimation d'étoiles filantesFaites traverser à des étoiles filantes un héros de ciel nocturne, ou laissez des formes d'étoiles…localConfettis CSSCélébrez un lancement, une inscription ou un anniversaire avec des confettis qui tombent, qui virevoltent…localConvertisseur CSS vers TailwindCollez des règles ou déclarations CSS et obtenez les classes utilitaires Tailwind équivalentes pour chaque…localGénérateur de glassmorphismConcevez une carte en verre dépoli avec des curseurs en direct et copiez un CSS compatible avec tous les…localGénérateur de valeurs arbitraires TailwindCollez votre CSS et obtenez du premier coup la syntaxe entre crochets de Tailwind : espaces remplacés par…localRedimensionner viewBox SVGNormalisez vos icônes vers un nouveau viewBox (par exemple 24×24) en recalculant les coordonnées réelles…localRecherche d’icônes SVGRecherchez parmi plus de 70 000 icônes SVG open source — Lucide, Tabler, Heroicons, Phosphor, Bootstrap,…localCompilateur SCSS vers CSSCollez du SCSS ou du Sass indenté pour obtenir du CSS pur, compilé par le moteur officiel Dart Sass…localLESS vers CSSCollez votre code Less et obtenez du CSS standard, compilé dans votre navigateur par le moteur officiel…localConvertisseur HTML vers JSXCollez du HTML (extrait, gabarit ou icône SVG) et obtenez du JSX prêt à intégrer dans un composant React :…localGénérateur de slider et carrouselConfigurez un carrousel au clic plutôt qu'en lisant la documentation : choisissez une bibliothèque,…localGénérateur Swiper SliderConfigurez Swiper 11 avec un éditeur visuel (breakpoints responsives, effets, lecture automatique, types…localGénérateur SplideCréez un carrousel Splide accessible et léger sans lire la documentation : réglez les options, vérifiez…localGénérateur de slider Glide.jsCréez un carrousel Glide.js minimal, le slider sans dépendance d'environ 7 Ko, avec breakpoints…localGénérateur Slick SliderConfigurez le carrousel jQuery Slick classique : réglages responsive, mode centré, fondu, lecture…
Il vous manque un outil CSS ?
Dites-nous ce dont vous avez besoin — nous créons d’abord les outils les plus demandés, gratuitement.