Generar CSS visualmente
Cuatro trozos de CSS que todo el mundo escribe a base de prueba y error, con la prueba y el error hechos sobre deslizadores en vez de en tu hoja de estilos.
- Funciona dentro de tu navegador
- Funciona sin conexión
- Sin subir archivos
- Sin registro
- Sin marca de agua
Cargando la herramienta…
Cómo funciona
- Elige el panel: degradado, sombra, esquinas o tamaño fluido.
- Arrastra hasta que la vista previa te convenza.
- Copia la línea de CSS.
Por qué no se sube nada
Todo lo que hace esta página lo ejecuta código que corre dentro de la pestaña de tu navegador, con el mismo motor que dibuja las páginas web. El archivo se lee del disco a la memoria de la pestaña, se transforma ahí y se vuelve a escribir como descarga. No se envía a ninguna parte: ni a nosotros, ni a terceros.
Compruébalo tú mismo
- Abre las herramientas de desarrollo del navegador (F12) y elige la pestaña «Red».
- Carga tu archivo y ejecuta la herramienta.
- Las únicas peticiones que verás descargan el código de la propia herramienta —y, en unas pocas herramientas pesadas, su motor de código abierto desde un CDN público—, más un pequeño aviso de visita a loreatec.jp (dirección y título de la página, nada más). Ninguna lleva tu archivo.
Preguntas frecuentes
¿Qué calcula en realidad el panel de clamp()?
La pendiente lineal. Tú dices «16px con 360px de ventana, 32px con 1280px» y sale clamp(16px, 8.3px + 2.17vw, 32px): el valor escala suave entre esas dos anchuras y se detiene en los dos extremos. La fórmula es sencilla y nadie se la aprende; ahí está toda la herramienta.
¿Por qué las sombras predefinidas quedan mejor que las mías escritas a mano?
Porque una sombra realista tiene menos opacidad, más desenfoque y algo de extensión negativa, más de lo que sugiere la intuición. Los ajustes predefinidos llevan esas proporciones dentro: parte de uno y retócalo, en vez de partir de 0 0 5px black.
¿Puedo hacer esas esquinas orgánicas e irregulares?
Marca la opción por esquina y ajusta los cuatro radios por separado: dos esquinas opuestas grandes dan la forma de hoja o de gota. Para formas del todo orgánicas hace falta la sintaxis de radio con dos valores, que este panel no cubre; lo que hay aquí cubre las formas que la gente publica de verdad.
¿Se envía algo a algún sitio?
No. La vista previa es un div con tus estilos aplicados: lo más local que puede llegar a ser una herramienta.