Herramientas visuales

Diseña con controles visuales y copia el código listo para pegar en tu proyecto. Cada herramienta tiene una vista previa en vivo y genera CSS limpio (y HTML, JavaScript o clases de Tailwind cuando aplica) con un botón Copiar.

Son ideales para dos cosas: aprender (mueve un control y observa qué propiedad cambia en el código) y trabajar más rápido en proyectos reales, sin memorizar la sintaxis de cada propiedad.

Cómo usarlas

1. Empieza con un preset parecido a lo que buscas.
2. Ajusta los controles hasta que te guste el resultado. Cambia el fondo de la vista previa (cuadros, claro u oscuro) para probar cómo se ve en tu diseño.
3. Abre la pestaña que necesites (CSS, HTML, Tailwind…) y pulsa Copiar.
4. Si quieres seguir experimentando con el resultado completo, pégalo en el Playground.

Color y fondos

🌈 DegradadosLineales, radiales y cónicos con varias paradas de color.🎨 Paletas de colorArmonías desde un color base, escalas de tonos y variables CSS.🖼️ FiltrosBlur, brillo, contraste, sepia y presets estilo Instagram.

Sombras, bordes y efectos

🌑 Sombras (box-shadow)Sombras multicapa, interiores y efectos de elevación.✨ Sombras de textoNeón, 3D, contorno y texto con degradado.⬛ Bordes redondeadosEsquinas individuales y formas orgánicas tipo blob.🧊 GlassmorphismEfecto de vidrio esmerilado con backdrop-filter.🫧 NeumorphismRelieves suaves con sombras claras y oscuras.✂️ Clip-pathRecorta elementos con formas o un polígono editable.

Componentes completos

🔘 BotonesColores, bordes, sombras, tipografía y estados hover/focus.🃏 TarjetasImagen, título, texto, botón y estilos de tarjeta.🧭 Barra de navegaciónNavbar responsive con menú hamburguesa: HTML, CSS y JS.🔎 Meta etiquetas SEOTitle, description, Open Graph y Twitter cards.

Layout y tipografía

📦 FlexboxPlayground con ítems y todas las propiedades flex.🔲 GridColumnas, filas, gap, colocación de ítems y áreas.🔤 Tipografía fluidaEscala tipográfica con clamp() y pares de fuentes.

Movimiento

🎬 AnimacionesConstructor de @keyframes con presets y reproducción.📈 Curvas cubic-bezierEditor de easing arrastrando puntos, con comparación.🔄 TransformacionesTranslate, rotate, scale, skew y perspectiva 3D.

Editor libre

🧪 PlaygroundEditor HTML, CSS y JS con vista previa al instante. Pega aquí lo que generes.