Générateur d'animations de chargement CSS
CSS Loader Generator
Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.
Design / laboratoire de systèmes visuels
Design
Prototipez des systèmes CSS et de couleurs avec aperçus en direct et code prêt à copier.
Design
17 outils essentiels. Construisez des systèmes CSS et couleur avec un retour visuel en direct et des résultats prêts à copier.
Affichage de 17 outils sur 17
Générateur de cases à cocher CSS
CSS Checkbox Generator
Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.
Générateur d'interrupteurs CSS
CSS Switch Generator
Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.
Générateur de clip-path CSS
CSS Clip Path Generator
Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.
Générateur de motifs de fond CSS
CSS Background Pattern Generator
Composez des motifs de fond en dégradés CSS — points, grille ou diagonale — sans fichier image : trois déclarations à coller, tuile et couleurs réglables.
Générateur de cubic-bezier CSS
CSS Cubic Bezier Generator
Placez les deux points de contrôle d'une courbe d'easing, regardez la cadence réelle sur la piste animée, et copiez les valeurs cubic-bezier() avec la durée.
Générateur de glassmorphism CSS
CSS Glassmorphism Generator
Dosez teinte, opacité, flou et saturation d'un panneau en verre dépoli sur fond chargé, et copiez le CSS : rgba, backdrop-filter préfixé, bordure et ombre.
Générateur de texte glitch en CSS
CSS Text Glitch Effect Generator
Créez un glitch typographique à trois couches — franges cyan et rouge en pas steps() — décalage et cadence réglables, repli statique en mouvement réduit.
Générateur de dégradés CSS
CSS Gradient Generator
Composez un dégradé linéaire ou radial avec angle, couleurs et arrêts explicites, et copiez la déclaration background exacte, prête pour une feuille de style.
Générateur de triangles CSS
CSS Triangle Generator
Générez un triangle isocèle en pur CSS — direction, base, hauteur et couleur au choix — grâce à la technique des bordures, net à toute densité d'écran.
Générateur d'ombres CSS
CSS Box Shadow Generator
Réglez décalages, flou, étendue, couleur et opacité d'une ombre, en mode externe ou inset, et copiez la déclaration box-shadow exacte aperçue en direct.
Générateur de border-radius CSS
CSS Border Radius Generator
Façonnez quatre coins en pixels ou en pourcent, liés ou indépendants — de l'arrondi uniforme aux formes organiques — et copiez la déclaration à quatre valeurs.
Générateur d'harmonies de couleurs
Color Harmony Builder
Générez cinq couleurs autour d'une base selon six règles d'harmonie, contraste WCAG mesuré par échantillon, exports CSS et JSON — moteur déterministe, sans IA.
HEX en RGBA
HEX to RGBA Converter
Décodez #RGB, #RGBA, #RRGGBB et #RRGGBBAA en rgba() avec l'alpha calculé exactement (octet divisé par 255), canaux détaillés et échantillon d'aperçu, en local.
RGBA en HEX
RGBA to HEX Converter
Convertissez rgb() et rgba() en hexadécimal majuscules, avec octet alpha conservé en notation à huit chiffres dès que la couleur est translucide, en local.
Générateur de nuances de couleur
Color Shades Generator
Créez une échelle de 3 à 20 nuances autour d'une couleur de base épinglée au centre, sans atteindre le noir ou le blanc pur, et exportez les variables CSS.
Mélangeur de couleurs
Color Mixer
Mélangez deux couleurs hexadécimales, alpha compris, par interpolation sRGB à poids réglable ou superposition, et exportez HEX, RGBA, CSS et un rapport JSON.
Ateliers design / transformez les décisions visuelles en règles réutilisables.
Réglez le système et gardez la sortie explicite.
Fixez la géométrie
Contrôlez espacements, rayons, motifs et formes avec des valeurs mesurables.
Ouvrir un outil correspondantConstruisez la logique couleur
Mélangez, convertissez et comparez les couleurs, résultat sous les yeux.
Ouvrir un outil correspondantEmportez le code
Copiez le CSS et les jetons générés sans reconstruire le design.
Ouvrir un outil correspondantConçus pour un travail concentré / un résultat utile sans étape de configuration.
Le navigateur d'abord, par conception.
Navigateur d'abord
Ouvrez la tâche. Aucun paquet ni compte requis.
Traitement visible
Voyez entrée, résultat, état et libellé d'exécution à chaque étape.
Prêt à exporter
Copiez ou téléchargez le résultat utile sans nettoyage supplémentaire.
Catégories liées
Poursuivez le flux avec une autre collection ciblée.
Notes de design système
Rendez chaque choix visuel reproductible.
Utilisez des contraintes délibérées
Partez d'une règle d'espacement, d'échelle ou de géométrie, pas de valeurs arbitraires.
Vérifiez le contraste en contexte
Jugez les couleurs sur la surface et la taille de texte où elles vivront.
Lisez le CSS généré
Vérifiez la prise en charge des navigateurs et les valeurs avant la mise en production.
Des questions avant de commencer ?
Quels outils de cette page fonctionnent en local ?
Tous les outils listés actuellement traitent la saisie active dans votre navigateur sans la téléverser. Tout futur traitement cloud ou hybride sera annoncé avant usage.
Une transformation modifiera-t-elle ma source ?
Toolars travaille sur une copie distincte dans le navigateur. Votre fichier ou texte d'origine reste inchangé, sauf si vous le téléchargez et le remplacez exprès.
Puis-je enregistrer un outil ?
Oui. Connectez-vous d'abord pour que Toolars enregistre le favori dans votre compte et vous ramène à l'outil.
Comment signaler un résultat incorrect ?
Chaque page d'outil inclut un canal de signalement. Le feedback envoyé ne contient que le message et le contexte de page que vous choisissez.
Il manque un utilitaire dans cette collection ?
Dites-nous l'entrée, la transformation et le résultat que vous attendez.