Generador de degradados de malla
Elige el número de puntos de control
Más puntos crean más zonas de color. Al cambiar la cuadrícula se conservan los colores existentes cuando es posible.
Los colores, las posiciones y el diseño exportado permanecen en este navegador. Las URL del embudo solo contienen el paso y los parámetros de atribución.
Editar degradadoCrea un fondo multicolor suave a partir de 4, 6 o 9 puntos móviles. Elige cada color, arrastra los puntos sobre el lienzo, prueba una paleta aleatoria seleccionada y exporta el diseño en SVG o PNG. También puedes copiar una aproximación en CSS formada por degradados radiales superpuestos. El proyecto permanece en esta pestaña mientras trabajas.
Cómo crear un degradado con aspecto de malla
-
1
Elige la cuadrícula
Empieza con 4, 6 o 9 puntos de control. Cuantos más puntos haya, más zonas de color podrás definir.
-
2
Selecciona los colores
Usa el selector de cada punto. El editor guarda colores HEX de seis dígitos.
-
3
Mueve los puntos
Arrástralos, escribe su posición horizontal y vertical o usa las teclas de flecha.
-
4
Elige el tamaño
Selecciona un formato apaisado, panorámico o cuadrado para los archivos SVG y PNG.
-
5
Exporta el diseño
Descarga un PNG o SVG, o copia la aproximación CSS con degradados radiales.
Cómo se generan los tres resultados
- PNG usa la misma interpolación de colores según la distancia que la vista previa. Si el formato elegido tiene otra proporción, los mismos puntos relativos se adaptan a las nuevas dimensiones.
- SVG coloca degradados radiales superpuestos en los mismos puntos de control y se puede ampliar sin perder nitidez.
- CSS crea una capa
radial-gradient()por punto sobre un color base, sin necesitar un archivo de imagen aparte.
SVG y CSS utilizan los mismos datos del proyecto, pero son aproximaciones ligeras al aspecto de una malla. Sus píxeles no serán idénticos a los del PNG.
Consejos para la paleta
- Los tonos próximos suelen producir transiciones suaves.
- Los tonos opuestos marcan más los límites entre regiones.
- Las paletas aleatorias sirven como punto de partida, no garantizan que el texto sea legible.
- Comprueba el contraste de cualquier texto, icono o control que coloques encima.
Colocación de los puntos
Arrastra un punto numerado sobre la vista previa o enfócalo y usa las flechas. Mantén Mayús pulsado para desplazarlo cinco puntos porcentuales. Los campos horizontal y vertical permiten introducir una posición exacta.
Los puntos pueden llegar al borde. Si juntas varios, concentrarás sus colores en una zona; si los separas, cada color ocupará más espacio.
Usos habituales
- Fondos de cabecera y separadores de secciones.
- Tarjetas para redes sociales y miniaturas de vídeo.
- Fondos para presentaciones e ilustraciones.
- Pantallas de inicio y paneles decorativos.
El PNG es la opción más fiel a la vista previa. Usa SVG si necesitas ampliar el diseño o CSS si prefieres un fondo editable sin archivo de imagen.
Privacidad y almacenamiento
Los colores, las posiciones y la resolución se guardan en la memoria del navegador y en sessionStorage. No se añaden a las URL del embudo ni al estado del servidor. La herramienta puede registrar que se realizó una exportación, pero nunca incluye los valores del proyecto.
El proyecto se puede restaurar desde sessionStorage durante un máximo de seis horas mientras la pestaña permanezca abierta. Al cerrarla suele eliminarse antes, así que descarga o copia todo lo que quieras conservar.
Preguntas frecuentes
Usan métodos distintos. PNG mezcla los píxeles según la distancia, mientras que SVG y CSS superponen degradados radiales. Comparten colores y posiciones, pero no son idénticos píxel a píxel.
Sí. Arrastra un punto, usa sus campos de posición o enfócalo y pulsa las flechas. Mantén Mayús para dar pasos mayores.
El editor guarda colores HEX de seis dígitos. Usa el selector o convierte primero el color RGB o HSL a HEX.
No. El CSS copiado aproxima el efecto mediante varios degradados radiales estándar.
Se puede restaurar desde sessionStorage durante un máximo de seis horas en la pestaña actual. Al cerrarla suele eliminarse antes. El proyecto no se envía al servidor ni se añade a las URL del embudo.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Generador de colores aleatorios
Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.
Convertidor de BBCode a HTML
Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes, enlaces y tablas.