Categorías

← View All Tools

Generador de Sombra de Caja CSS

Genera propiedades de sombra de caja CSS

-100 -100 100
-100 4 100
0 10 100
-50 -50 50
0 0.2 1

Datos clave

Categoría
Design
Tipos de entrada
range, color, checkbox
Tipo de salida
text
Cobertura de muestras
4
API disponible
Yes

Resumen

El Generador de Sombra de Caja CSS es una herramienta intuitiva diseñada para crear y visualizar propiedades de sombra en elementos web, permitiéndote obtener el código CSS exacto para tus diseños de forma rápida y precisa.

Cuándo usarlo

  • •Cuando necesites añadir profundidad visual a tarjetas, botones o contenedores en tu sitio web.
  • •Al buscar un estilo de sombra específico sin tener que escribir y probar manualmente los valores de código.
  • •Para experimentar con efectos de sombra interior o exterior en tiempo real antes de implementarlos en tu hoja de estilos.

Cómo funciona

  • •Ajusta los deslizadores para definir el desplazamiento horizontal y vertical de la sombra.
  • •Modifica el radio de desenfoque y expansión para controlar la suavidad y el tamaño del efecto.
  • •Selecciona el color y la opacidad deseados, y activa la opción de sombra interior si es necesario.
  • •Copia el código CSS generado automáticamente para pegarlo directamente en tu proyecto.

Casos de uso

Creación de tarjetas de contenido con elevación visual para mejorar la jerarquía de la interfaz.
Diseño de botones interactivos que cambian de sombra al pasar el cursor para mejorar la experiencia de usuario.
Generación de efectos de profundidad en modales o menús desplegables para separarlos del fondo.

Ejemplos

1. Sombra suave para tarjetas de perfil

Diseñador UI
Contexto
Necesito que las tarjetas de perfil de mi aplicación tengan un aspecto moderno y elevado.
Problema
Las sombras predeterminadas son demasiado oscuras y rígidas.
Cómo usarlo
Ajusté el desplazamiento vertical a 4px, el desenfoque a 15px y reduje la opacidad a 0.15.
Configuración de ejemplo
horizontal: 0, vertical: 4, blur: 15, spread: 0, color: #000000, opacity: 0.15, inset: false
Resultado
Obtuve un código CSS limpio que genera una sombra sutil y elegante para mis tarjetas.

2. Efecto de botón presionado

Desarrollador Frontend
Contexto
Quiero que un botón parezca hundirse cuando el usuario hace clic en él.
Problema
Lograr el efecto de 'inset' manualmente requiere múltiples pruebas de valores.
Cómo usarlo
Activé la opción 'Sombra Interior' y ajusté los valores de desplazamiento para que la sombra aparezca en la parte superior.
Configuración de ejemplo
horizontal: 0, vertical: 2, blur: 5, spread: 0, color: #000000, opacity: 0.3, inset: true
Resultado
El código generado crea un efecto de profundidad interna que simula perfectamente un botón presionado.

Probar con muestras

design
Ejemplos de Selectores CSS
Colección de ejemplos de selectores CSS para pruebas de extracción y análisis
title token css
sample
Ejemplos de Tailwind CSS
Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada
title token css
sample
Ejemplos del Framework CSS Milligram
Ejemplos del framework CSS Milligram incluyendo tipografía, formularios, grids y componentes
title token css
sample
Ejemplos del Framework CSS Bulma
Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS
title token css
sample

Hubs relacionados

Herramientas de Design para Generate
Explora 19 herramientas de design para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Design para Convert
Explora 98 herramientas de design para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Json para Generate
Explora 33 herramientas de json para flujos de generate y encuentra utilidades cercanas con rapidez.
Herramientas de Pdf para Generate
Explora 10 herramientas de pdf para flujos de generate y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué es el radio de desenfoque?

Es la propiedad que determina qué tan difusa o borrosa será la sombra; a mayor valor, más suave será el efecto.

¿Puedo crear sombras interiores?

Sí, al marcar la opción 'Sombra Interior' (inset), la sombra se aplicará dentro del borde del elemento en lugar de fuera.

¿Cómo afecta el radio de expansión?

El radio de expansión aumenta o disminuye el tamaño de la sombra; valores positivos la agrandan y negativos la encogen.

¿Es compatible este código con todos los navegadores?

Sí, el código generado utiliza la propiedad estándar 'box-shadow', compatible con todos los navegadores modernos.

¿Puedo cambiar el color de la sombra?

Absolutamente, puedes elegir cualquier color mediante el selector de color y ajustar su opacidad para lograr el efecto deseado.

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/box-shadow-generator

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
horizontal range Sí -
vertical range Sí -
blur range Sí -
spread range Sí -
color color Sí -
opacity range Sí -
inset checkbox No -

Formato de respuesta

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texto: Texto

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-box-shadow-generator": {
      "name": "box-shadow-generator",
      "description": "Genera propiedades de sombra de caja CSS",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=box-shadow-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]