Herramientas · CSS
Herramientas CSS gratis
Constructores visuales para el CSS que de otro modo ajustarías a prueba y error: arrastra un degradado, apila sombras, da forma a un border-radius o un clip-path, dibuja una curva de easing, organiza flexbox y grid con vista previa en vivo y minifica o formatea una hoja de estilos. Copia el CSS final; no se sube nada.
Crear degradado CSS
Crea un degradado CSS lineal, radial o cónico, y copia el código.
Crear una sombra CSS
Crea una sombra CSS de varias capas (box-shadow) con vista previa en vivo, y copia el código.
Redondear esquinas en CSS
Da forma a cada esquina de una caja por separado, o combínalas en una forma orgánica, y copia el CSS border-radius.
Crear un efecto glassmorphism
Crea una tarjeta de vidrio esmerilado con desenfoque de fondo, transparencia y borde suave, y copia el CSS.
Generador de curvas cubic-bezier
Arrastra una curva para crear un valor de aceleración cubic-bezier(), obsérvala en acción con una transición CSS en vivo, y copia el código.
Generador de clip-path
Crea una forma de recorte CSS clip-path: polígono, círculo, elipse o rectángulo interior, con una vista previa en vivo, y copia el código.
Minificador y formateador de CSS
Minifica o formatea CSS, en vivo mientras pegas, completamente en tu navegador.
Zona de pruebas Flexbox
Crea un diseño CSS flexbox: dirección, ajuste de línea, justificación, alineación, espacio, y crecimiento/reducción/base por elemento, con una vista previa en vivo, y copia el código.
Zona de pruebas Grid
Crea un diseño CSS grid: número de pistas, espacios, alineación, y colocación por elemento, con una vista previa en vivo, y copia el código.