Editeur Cubic-Bezier

Designez des courbes d'easing personnalisees visuellement avec un editeur bezier interactif. Previsualisation d'animations en temps reel et export CSS ou Tailwind.

Easing Library

Curve Editor

P10.40, 0.00

P20.20, 1.00

Preview

X1: 0.40

Y1: 0.00

X2: 0.20

Y2: 1.00

Duration: 500ms

cubic-bezier(0.40, 0.00, 0.20, 1.00)

Show Tailwind

CSS

transition-timing-function: cubic-bezier(0.40, 0.00, 0.20, 1.00);

Tailwind CSS

<div class="transition-all duration-500 ease-[cubic-bezier(0.40,_0.00,_0.20,_1.00)]">
  ...
</div>

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Animation

Editeur d'animations CSS

Construisez des animations CSS keyframes visuellement avec un editeur de timeline. Export CSS et Tailwind.

Try it ->

NewAnimation

Generateur d'animations SVG

Generez des graphiques SVG animes — spinners, loaders, formes, vagues et plus. Personnalisez couleurs, vitesse et taille, puis copiez ou telechargez.

Try it ->

NewAccessibility

Testeur de breakpoints

Previsualiser du HTML a plusieurs tailles d'ecran cote a cote. Testez vos layouts responsives avec la reference des breakpoints Tailwind.

Try it ->

Effects

Generateur d'effets texte

Creez des effets de texte — gradient, stroke, neon glow, ombre longue, retro 3D et emboss.

Try it ->

Accessibility

Verificateur de contraste

Verifiez les ratios de contraste WCAG entre deux couleurs. Conformite AA et AAA en temps reel.

Try it ->

Layout

Flexbox Playground

Construisez des layouts flexbox visuellement. Controlez direction, justify, align, wrap, gap et les proprietes de chaque item.

Try it ->

Voir tous les Goodies