devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoría web

Herramientas CSS y diseño

Generadores visuales y calculadoras para desarrolladores front-end y Webflow.

localCalculadora de abrazaderasIntroduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de…localGenerador de efectos hover CSSDiseña animaciones hover para botones, tarjetas, enlaces e iconos. Elige un efecto, pruébalo en distintos…localGenerador de Keyframes CSSUn editor visual para @keyframes. Añade keyframes en una línea de tiempo, define transformaciones,…localGenerador de animaciones CSSDiseña animaciones CSS sobre una línea de tiempo real de keyframes. Empieza desde más de 50 presets,…localGenerador Cubic BezierDa forma a una curva de easing arrastrando dos puntos y compárala con los easings estándar. ¿Necesitas…localGenerador de loaders CSSElige entre 13 spinners de carga solo con CSS, ajusta tamaño, colores, grosor y velocidad, y copia HTML y…localGenerador de Gradientes CSSDiseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un…localGenerador de Box ShadowApila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre…localConvertidor PX a REMConvierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa…localConversor SVG a JSXPega un SVG de Figma, Illustrator o de un set de iconos y obtén un componente React (JSX o TSX) listo para…localConversor SVG a CSSPega un SVG y obtén un data URI compacto codificado en URL, además de CSS listo para usar con…localGenerador de CSS GridDefine las columnas, filas y gap, y luego arrastra sobre las celdas para crear áreas como header, sidebar…localGenerador de Border RadiusRedondea las esquinas de cualquier caja: arrastra un control para todas las esquinas o define cada esquina…localGenerador de filtros CSSAjusta blur, brillo, contraste, saturación, tono, escala de grises, sepia, invertir y sombra paralela…localGenerador de clip-path CSSRecorta imágenes y elementos en cualquier forma: elige una de 15 formas iniciales (triángulo, hexágono,…localGenerador de máscaras CSSHaz que imágenes y secciones se desvanezcan en lugar de cortarse en seco: difumina un borde, arriba y…localGenerador de triángulos CSSCrea un triángulo solo con CSS para la flecha de un tooltip, el caret de un desplegable o un globo de…localGenerador de Blobs SVGCrea formas blob orgánicas y suaves para fondos hero, avatares e ilustraciones. Ajusta la complejidad…localGenerador de Olas SVGDiseña separadores ondulados para landing pages: añade o quita olas (hasta 6, cada una con su propio…localGenerador de Flexbox CSSMira exactamente qué hace cada propiedad de flexbox: define la dirección, el ajuste de línea,…localGenerador de escala tipográficaElige un tamaño de fuente base y una razón (Tercera menor, Tercera mayor, Cuarta justa, Razón áurea) y…localGenerador de patrones SVGDale a secciones y tarjetas una textura sutil con patrones SVG sin costuras: puntos, cuadrículas, líneas…localGenerador de Botones CSSDiseña un botón que se vea bien en todos los estados. Empieza con un preset (sólido, contorno, fantasma,…localDifuminar bordes de imagen CSSDale a tus fotos e imágenes destacadas bordes suaves y difuminados con una sola regla CSS, sin editar la…localGenerador de viñeta CSSAñade una viñeta — un desvanecido suave y redondeado en los bordes — a fotos, tarjetas y secciones hero…localMáscara de forma CSSPon cualquier foto dentro de una forma — estrella, corazón, hexágono, círculo, flecha, globo de diálogo… —…localGenerador de Divisores de SecciónDa a las secciones de tu landing page bordes angulados, curvos, en flecha, ondas, zigzag o festoneados con…localSección angulada CSSCrea secciones anguladas, inclinadas o diagonales —el clásico look de las landing pages— con una sola…localDivisor de sección curvoRedondea el borde de un hero o una sección con una curva —convexa, cóncava, un ángulo curvo, una suave…localGenerador de borde zigzag CSSRecorta un borde en zigzag, de dientes de sierra, festoneado o escalonado en secciones, tarjetas, cupones…localGenerador de partículasAñade nieve, lluvia, estrellas fugaces, confeti, pétalos, hojas de otoño, corazones o burbujas que suben a…localEfecto de nieve CSSHaz que nieve en tu web por las fiestas: nieve suave o copos, una ligera nevada o una ventisca. Copia un…localAnimación de lluvia CSSHaz que llueva en una página o en la sección principal, desde una llovizna suave hasta un aguacero…localEstrellas fugacesHaz que estrellas fugaces crucen un cielo nocturno en el hero, o deja que figuras de estrella caigan y…localConfeti CSSCelebra un lanzamiento, un registro o un cumpleaños con confeti cayendo que ondea y da vueltas en colores…localCSS a TailwindPega reglas o declaraciones CSS y obtén las clases utilitarias de Tailwind equivalentes para cada…localGenerador de GlassmorphismDiseña una tarjeta de cristal esmerilado con controles en vivo y copia CSS compatible con todos los…localGenerador de valores arbitrarios TailwindPega tu CSS y obtén la sintaxis de corchetes de Tailwind bien a la primera: los espacios se convierten en…localEscalador de ViewBox SVGNormaliza iconos a un nuevo viewBox (por ejemplo, 24×24) reescalando las coordenadas reales dentro de cada…localBuscador de iconos SVGBusca entre más de 70 000 iconos SVG de código abierto: Lucide, Tabler, Heroicons, Phosphor, Bootstrap,…localSCSS a CSSPega SCSS o Sass indentado y obtén CSS plano, compilado por el motor oficial Dart Sass en tu navegador,…localLESS a CSSPega tu código Less y obtén CSS puro, compilado por el motor oficial Less.js directamente en tu navegador.…localConvertidor HTML a JSXPega HTML (un fragmento, una plantilla o un icono SVG) y obtén JSX listo para usar en un componente de…localGenerador de CarruselesConfigura un carrusel con clics en lugar de leer la documentación: elige una librería, define breakpoints,…localGenerador de SwiperConfigura Swiper 11 con un editor visual (breakpoints responsivos, efectos, autoplay, tipos de paginación…localGenerador de Splide SliderCrea un carrusel Splide accesible y ligero sin leer la documentación: define las opciones, revisa la vista…localGenerador de Glide.jsCrea un carrusel Glide.js mínimo — el slider de unos 7 KB, sin dependencias — con breakpoints responsive,…localGenerador de Slick SliderConfigura el clásico carrusel jQuery Slick (ajustes responsive, modo centrado, fade, autoplay, flechas y…