Herramientas de CSS y Diseño online gratis

Generadores visuales de CSS, colores, sombras y gradientes.

9 herramientas

Generador de box-shadow CSSDiseña sombras realistas combinando varias capas, como hacen los mejores sistemas de diseño. Ajusta desplazamiento, desenfoque, expansión, color y opacidad de cada capa y copia el resultado en CSS o como clase de Tailwind.

Conversor de colores (HEX, RGB, HSL, CMYK, OKLCH)Escribe un color en cualquier formato —#hex, rgb(), hsl(), hwb(), oklch() o un nombre como «tomato»— y obtén al instante todas sus equivalencias, su contraste con blanco y negro según WCAG y una escala de tintes y sombras.

Generador de paletas de coloresParte de tu color de marca y obtén una escala completa de 50 a 950 perceptualmente uniforme, lista para tu sistema de diseño, junto con combinaciones armónicas. El color original se conserva exacto en el paso que le corresponde.

Generador de degradados CSSDiseña fondos con degradado arrastrando paradas de color sobre una barra, elige el tipo (lineal, radial o cónico) y copia un CSS listo para producción, con color de respaldo y versión moderna en OKLCH sin zonas grises.

Generador de CSS GridConfigura columnas, filas y espacios con controles deslizantes y ve el resultado en directo. Copia el CSS y el HTML listos para pegar en tu proyecto.

Generador de glassmorphism (efecto cristal)Diseña tarjetas y paneles de cristal esmerilado viendo el resultado al instante sobre distintos fondos. El CSS generado incluye el prefijo -webkit- que Safari todavía necesita.

Extractor de paleta de coloresSube una foto, logo o ilustración y descubre sus colores principales. Elige cuántos colores quieres, copia cada HEX con un clic o toda la paleta como variables CSS.

Generador de neumorfismo (Soft UI)El neumorfismo simula elementos que emergen del propio fondo con dos sombras opuestas, una clara y otra oscura. Ajusta cada parámetro, elige de dónde viene la luz y copia el CSS.

Generador de olas y blobs SVGDiseña separadores de sección ondulados y formas orgánicas únicas. Ajusta los puntos, la amplitud y los colores, regenera hasta que te guste y copia el código SVG o descarga un PNG.