Generador de Sombras CSS
Diseña efectos de box-shadow y text-shadow visualmente con controles deslizantes y una vista previa en vivo. Ajusta desplazamiento horizontal/vertical, desenfoque, dispersión, color y opacidad — luego copia el código CSS listo para usar.
Sombra de Caja
Desp. H4px
Desp. V4px
Desenfoque12px
Dispersión0px
ColorOpacidad:0.2
Interior
box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.2);
Sombra de Texto
Desp. H2px
Desp. V2px
Desenfoque4px
ColorOpacidad:0.4
AnyText
text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
Cómo Usar el Generador de Sombras CSS
- Sombra de Caja: Arrastra los controles para desplazamiento H/V, desenfoque y dispersión. Elige un color y opacidad. Marca "Interior" para una sombra interna.
- Sombra de Texto: Ajusta los controles en la sección Sombra de Texto (sin dispersión ni interior para text-shadow).
- La vista previa se actualiza instantáneamente al arrastrar. Haz clic en "Copiar CSS" para copiar el código generado.
Características
- Controles deslizantes para desplazamiento, desenfoque, dispersión, color y opacidad
- Vista previa en vivo sobre fondo de tablero de ajedrez para contraste
- Opción de sombra interior para box-shadow
- Genera color RGBA para un control preciso de la opacidad
- Copia del código CSS con un clic para sombra de caja y de texto
- Controles separados para box-shadow y text-shadow
Css shadow generator: usos practicos
Usa css shadow generator cuando necesites una respuesta rapida, clara y privada sin crear una cuenta. La pagina tambien cubre variantes relacionadas como css shadow generator online, css shadow generator validador, css shadow generator formateador para que puedas elegir el flujo correcto.
Cuándo usarlo
- Ideal para: Pegar codigo, datos estructurados, tokens, hashes o texto codificado y obtener un resultado claro al instante.
- Detalles utiles: Usa ejemplos, mensajes de validacion, acciones de copia y opciones de formato para detectar errores antes de publicar.
- Siguiente paso: Continua con otro formateador, validador, codificador, parser o convertidor cuando cambie el formato de trabajo.
Para continuar, prueba tambien Formateador y Validador de JSON, Probador de Expresiones Regulares, Codificador y Decodificador Base64, Generador de Hash.
Preguntas Frecuentes
¿Qué es el valor "Dispersión" en box-shadow?
La dispersión expande o contrae la sombra más allá del radio de desenfoque. Una dispersión positiva hace la sombra más grande que el elemento; una negativa la hace más pequeña y ajustada, creando un efecto de profundidad más realista.
¿Qué hace "Interior"?
Cuando está marcado, el box-shadow se renderiza dentro del elemento en lugar de fuera. Esto crea un aspecto hundido o en relieve, usado comúnmente en campos de entrada o botones presionados.
¿Puede text-shadow usar dispersión o interior?
No. La propiedad CSS text-shadow solo acepta desplazamiento horizontal, desplazamiento vertical y radio de desenfoque. La dispersión e interior solo son válidos para box-shadow.
