Generador de degradados CSS y box-shadow | Vista previa segura SVG

Qué puede hacer con el generador de gradientes CSS, box-shadow y vista previa segura de SVG

Puede ver gradientes lineales, radiales y cónicos, múltiples box-shadows y código SVG en una sola pantalla. Puede copiar solo el resultado ajustado como CSS, sin necesidad de calcular manualmente ángulos, posiciones de color, desenfoque o expansión.

El SVG se analiza como XML y se eliminan style, animaciones, scripts, atributos de eventos y referencias externas. Luego, no se inserta directamente en el DOM de la página, sino que se muestra aislado como imagen Blob. Puede ver el número de eliminaciones, copiar y guardar el SVG verificado, y convertir a PNG lo que el navegador pueda renderizar. Todo el procesamiento se realiza en el navegador.

Cómo crear degradados CSS

1. Elegir tipoPara fondos que cambian de color en una dirección, use lineal; para luces o círculos que se expanden desde el centro, radial o elíptico; para ruedas de color o medidores, cónico.
2. Definir colores y posicionesConfigure el código de color y la posición de 0 a 100 %. Añada colores intermedios con «Añadir color».
3. Ajustar ángulo y centroEn lineal y cónico se cambia el ángulo; en circular, elíptico y cónico se cambia la posición central para la vista previa.
4. Copiar CSSCopie el resultado visto en pantalla como declaración background-image y aplíquelo al elemento deseado.

Para cambios bruscos de color, especifique la misma posición en dos colores diferentes. Para rayas, active «Repetir» y establezca la última posición de color en un valor pequeño como 20% para facilitar el ajuste.

Cuándo usar linear, radial y conic-gradient

Valores de Box Shadow y apariencia

box-shadow se especifica en el orden «X», «Y», «desenfoque», «expansión» y «color». X positivo mueve a la derecha, negativo a la izquierda; Y positivo mueve hacia abajo, negativo hacia arriba. El desenfoque es 0 o más; cuanto mayor, más suave el contorno. La expansión positiva agranda toda la sombra, la negativa la reduce.

Para que las sombras se vean naturales, no solo use negro puro con poca opacidad; use azul marino o gris oscuro que combine con el fondo y aplique transparencia. Para tarjetas flotantes, aumente un poco Y y amplíe el desenfoque; para campos de entrada hundidos, use «Interior». En varias capas, separe una sombra corta para contacto con el suelo y una amplia para sensación de aire.

Por qué previsualizar SVG de forma segura

SVG es un formato de imagen, pero como documento XML puede incluir scripts, enlaces, style, animaciones, atributos de eventos y HTML. Pegar un SVG de origen desconocido directamente en una página web puede provocar procesos no deseados o comunicaciones externas. Esta herramienta elimina script, style, animaciones, enlaces, foreignObject, iframe, object, embed, atributos de eventos y referencias URL externas, y lo muestra aislado como imagen.

Sin embargo, la eliminación aquí no garantiza la seguridad en todos los entornos de uso. CMS, correo, software de diseño, etc., pueden permitir o prohibir elementos por su cuenta. Antes de publicar, verifique la política de SVG del sistema que usará, y considere convertir materiales no confiables a PNG para usarlos.

Comprobación de viewBox, width y height

viewBox representa el rango de coordenadas internas del SVG. Por ejemplo, «0 0 1200 630» significa que la esquina superior izquierda es 0,0 y tiene coordenadas de 1200 de ancho y 630 de alto. width y height son las dimensiones base de visualización. En diseño responsivo, incluso con width al 100%, si el viewBox es adecuado, se mantiene la relación de aspecto.

Para usar iconos o logotipos en otros tamaños, no escale cada elemento individualmente; conserve el viewBox y decida las dimensiones de visualización con CSS. Si el SVG tiene mucho espacio en blanco, el viewBox puede incluir espacio innecesario. Corrija el archivo original consultando los valores mostrados en esta herramienta.

Calidad de visualización a verificar antes de implementar

• En los degradados con texto superpuesto, compruebe que sea legible tanto en las zonas más claras como en las más oscuras.
• No indique el estado solo con diferencias de color; añada también texto, iconos, bordes u otras señales.
• No se limite solo a box-shadow; deje un borde o diferencia de fondo visible incluso en entornos de bajo contraste.
• En SVG, reemplace el texto por texto HTML cuando no sea necesario como imagen, para facilitar la lectura en voz alta y el zoom.
• Al convertir a PNG se pierde la escalabilidad vectorial. Se genera con las dimensiones necesarias para el uso.
• Debido a diferencias de renderizado entre navegadores, verifique también en los navegadores principales que usará en el destino de publicación.

Manejo del CSS y SVG introducidos

El cálculo de gradientes, la generación de sombras, el análisis/eliminación/renderizado de SVG y la conversión a PNG se realizan en el navegador. No enviamos valores de CSS, código SVG ni archivos SVG seleccionados al servidor de WiseChecker ni a APIs externas. Al recargar la página, las entradas y vistas previas desaparecen.

Al crear PNG desde SVG, el navegador elimina imágenes o fuentes externas que no puede renderizar de forma segura. Por lo tanto, un SVG que dependa de materiales externos puede verse diferente al original. Incruste las imágenes necesarias de forma segura tras verificar los derechos de uso, y convierta el texto en trazados para evitar diferencias de fuentes.

Preguntas frecuentes sobre la vista previa de CSS y SVG

Herramientas gratuitas relacionadas