Herramientas y Calculadoras de CSS

gradient Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generarchevron_right layers Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generarchevron_right rounded_corner Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generarchevron_right text_format Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generarchevron_right border_style Generador de Bordes CSS Diseña un borde de forma visual — grosor, estilo (solid, dashed, dotted, double…), color y radio — con vista previa en vivo. Generarchevron_right blur_on Generador de Glassmorphism CSS Diseña un efecto de vidrio (glassmorphism) con vista previa en vivo — ajusta desenfoque, transparencia, tono y borde, y copia el CSS. Generarchevron_right swap_vert Generador de Scrollbar CSS Diseña una barra de desplazamiento personalizada con vista previa en vivo y copia el CSS — compatible con WebKit y Firefox. Generarchevron_right transform Generador de Transform CSS Combina rotate, scale, translate y skew visualmente y copia el CSS transform resultante. Generarchevron_right speed Generador de Transition CSS Crea una transition — propiedad, duración, función de temporización y retraso — y pruébala en vivo con un clic. Generarchevron_right photo_filter Generador de Filtros CSS Combina blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia e invert con vista previa en vivo. Generarchevron_right animation Generador de Animaciones CSS Elige un preajuste de keyframes — giro, pulso, rebote, sacudida, desvanecimiento, deslizamiento — ajusta la duración y las repeticiones, copia @keyframes + la clase. Generarchevron_right view_column Zona de Pruebas de CSS Flexbox Ajusta flex-direction, justify-content, align-items, wrap y gap en cajas en vivo, y luego copia el CSS del contenedor. Usarchevron_right mouse Selector de Cursores CSS Pasa el cursor sobre cada valor de CSS cursor para probarlo en vivo, haz clic para copiar la declaración. Usarchevron_right view_week Generador de Columnas CSS Distribuye el texto en columnas al estilo periódico — número, espacio y línea divisoria — con vista previa en vivo y CSS. Generarchevron_right format_size Generador de Escala Tipográfica Crea una escala tipográfica modular a partir de un tamaño base y una proporción — vista previa en vivo, tabla px/rem y variables CSS listas para copiar. Generarchevron_right text_fields Calculadora de Tipografía Fluida — CSS clamp() Genera un CSS clamp() que escala el tamaño de fuente suavemente entre dos anchos de viewport — sin necesidad de breakpoints. Calcularchevron_right view_column Calculadora de Columnas de Grid Anchos de columna para cualquier contenedor, número de columnas y espaciado — con código CSS grid listo para copiar y tamaños de span multi-columna. Calcularchevron_right