Herramientas de diseño
14 herramientasElija colores, cree efectos CSS, compruebe el contraste y genere recursos visuales.
- Generador de degradados CSSCree hermosos degradados CSS con vista previa
- Generador de sombras de cajasGenere propiedades CSS box-shadow
- Generador de radios de bordeCree propiedades CSS border-radius
- Generador de firmasCree imágenes de firmas manuscritas con 30 fuentes o mediante dibujo
- Creador de barras de progresoDiseñe barras de progreso animadas
- Creador de marcas de aguaAñada marcas de agua de texto o logotipos a imágenes para protegerlas
- Verificador de contraste WCAGCompruebe las relaciones de contraste de colores para cumplir los requisitos de accesibilidad WCAG AA y AAA
- Generador de faviconsCree favicons a partir de texto, emojis o imágenes para su sitio web
- Creador de collages de fotosCree hermosos collages de fotos con varias distribuciones
- Selector de colores y generador de paletasSeleccione colores y genere paletas de colores
- RGB a HEX a HSLConvierta entre los formatos de color RGB, HEX y HSL
- Generador de animaciones CSSCree animaciones CSS de fotogramas clave con un editor visual de línea de tiempo
- Entorno de pruebas de CSS FlexboxEntorno de pruebas interactivo para aprender y generar diseños Flexbox
- Generador de CSS GridConstructor visual de diseños CSS Grid con generación de código
Cree y revise detalles visuales
Genere colores, efectos CSS, fragmentos de diseño de página y pequeños recursos visuales para un proyecto. Previsualizar un efecto ayuda a elegir, pero el resultado final depende del diseño circundante, la ventana de visualización y el contenido. Revise el contraste y el comportamiento adaptable, además del aspecto de cada elemento individual.
Pase de una elección visual a un resultado utilizable
Generador de degradados CSS crea estilos de degradado, Selector de colores y generador de paletas ayuda a elegir una paleta, y Verificador de contraste WCAG compara los colores de primer plano y de fondo. Pruebe el resultado con los tamaños y estados reales del texto.
Preguntas frecuentes
¿Una relación de contraste aprobada hace que una página sea totalmente accesible?
No. El contraste es una sola comprobación. También importan la navegación con teclado, las etiquetas, la visibilidad del foco, la estructura del documento y otros requisitos de accesibilidad.
¿Cómo convierto la vista previa de un degradado en un estilo para mi sitio web?
Generador de degradados CSS produce una declaración de degradado. Aplíquela al elemento deseado y pruébela con las dimensiones, el texto y el fondo reales que se usan en la página.
¿Puedo comparar dos colores antes de elegirlos para un texto?
Verificador de contraste WCAG calcula la relación de contraste de los colores de primer plano y de fondo. Use los colores reales y compruebe los criterios adecuados al tamaño y al grosor del texto.
¿Cómo cambio entre HEX, RGB y HSL?
RGB a HEX a HSL cambia la notación de un valor de color. La notación describe el color; no genera automáticamente una paleta ni garantiza un buen contraste.