Générer du CSS visuellement
Quatre morceaux de CSS que tout le monde écrit par tâtonnements, avec les tâtonnements faits sur des curseurs plutôt que dans votre feuille de style.
- Fonctionne entièrement dans votre navigateur
- Fonctionne hors ligne
- Aucun envoi de fichier
- Sans inscription
- Sans filigrane
Chargement de l’outil…
Comment ça marche
- Choisissez le panneau : dégradé, ombre, coins ou taille fluide.
- Faites glisser jusqu’à ce que l’aperçu vous convienne.
- Copiez la ligne de CSS.
Pourquoi rien n’est envoyé
Toutes les opérations de cette page sont effectuées par du code qui tourne dans l’onglet de votre navigateur, avec le moteur qui affiche les pages web. Le fichier est lu depuis le disque vers la mémoire de l’onglet, transformé sur place, puis réécrit sous forme de téléchargement. Il n’est jamais envoyé où que ce soit — ni à nous, ni à un tiers.
Vérifiez-le vous-même
- Ouvrez les outils de développement de votre navigateur (F12) et choisissez l’onglet « Réseau ».
- Chargez votre fichier et lancez l’outil.
- Les seules requêtes que vous verrez téléchargent le code de l’outil lui-même — et, pour quelques outils lourds, leur moteur open source depuis un CDN public — plus un petit signal de visite vers loreatec.jp (adresse et titre de la page, rien de plus). Aucune ne transporte votre fichier.
Questions fréquentes
Que calcule exactement le panneau clamp() ?
La pente linéaire. Vous dites « 16px pour une fenêtre de 360px, 32px à 1280px » et il sort clamp(16px, 8.3px + 2.17vw, 32px) — la valeur varie progressivement entre vos deux largeurs et s’arrête aux deux extrémités. La formule est simple et personne ne la retient ; c’est tout l’outil.
Pourquoi les préréglages d’ombre rendent-ils mieux que mes ombres écrites à la main ?
Parce qu’une ombre réaliste est moins opaque, plus floue et un peu plus resserrée (spread négatif) que l’intuition ne le suggère. Les préréglages encodent ces proportions : partez de l’un d’eux et ajustez, plutôt que de 0 0 5px black.
Puis-je faire les formes de coins irrégulières et organiques ?
Cochez l’option par coin et réglez les quatre rayons séparément — deux coins opposés très arrondis donnent la forme de feuille. Pour des formes totalement organiques, il faut la syntaxe de rayon à deux valeurs, qui dépasse ce panneau ; ce qui est ici couvre les formes réellement utilisées en production.
Est-ce que quelque chose est envoyé quelque part ?
Non. L’aperçu est un div auquel vos styles sont appliqués — la chose la plus locale qu’un outil puisse faire.