# Generador CSS de sombras de color

> Previsualiza una sombra de caja CSS y copia el código.

[Open tool](https://www.toolcabana.com/es/box-shadow) · [Desarrollo y datos](https://www.toolcabana.com/es/category/developer-and-data)

Tool ID: box-shadow. Requested language: es. Description language: es. Complete guide translation: yes.

## Overview (en)

Color CSS shadow generator builds a box-shadow declaration from horizontal and vertical offsets, blur, spread, a shadow color and an opacity from 0 to 1, with an optional inset shadow. It shows a live preview card and outputs a ready-to-copy CSS line that writes the color as rgba.

## Supported tasks (es)

Previsualiza una sombra de caja CSS y copia el código.

## Steps (es)

1. Ajusta los valores; se calcula un resultado inicial desde los valores predeterminados.
2. Cambia los ajustes básicos o abre el modo avanzado para afinar el resultado.
3. Revisa y copia o descarga tu resultado. Pausa los resultados en vivo para ejecutar manualmente. Las fuentes o ajustes individuales de más de 20,000 caracteres requieren una ejecución explícita.

## Settings

- Desplazamiento horizontal (px) (es; key: x; type: number)
- Desplazamiento vertical (px) (es; key: y; type: number)
- Desenfoque (px) (es; key: blur; type: number); minimum: 0; maximum: 200
- Extensión (px) (es; key: spread; type: number)
- Color de sombra (es; key: color; type: color)
- Opacidad (es; key: opacity; type: range); minimum: 0; maximum: 1
- Interior (es; key: inset; type: checkbox)

## Limitations (es)

Usa números finitos, fechas válidas y los rangos que muestra cada control. Los valores no válidos producen un error sin resultado descargable.

## Example input

```text
Hello ToolCabana
```

## Privacy and connections (es)

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

## Questions (es)

### How do I make an inset box shadow in CSS?

Turn on the Inset option. The generated declaration then starts with the inset keyword, and the preview card shows the shadow inside its edges instead of outside.

### How do I set the transparency of a CSS shadow?

Use the Opacity slider, from 0 to 1 in steps of 0.01. The chosen color is converted to rgba with that alpha value, so the default of 0.15 gives a soft shadow.

### What is the maximum blur for the shadow generator?

Blur accepts whole pixel values from 0 to 200. The horizontal and vertical offsets and spread can be negative, which moves or shrinks the shadow.

### ¿Dónde se procesa mi entrada?

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

### ¿Cuáles son los límites de entrada?

Usa números finitos, fechas válidas y los rangos que muestra cada control. Los valores no válidos producen un error sin resultado descargable.

## Related tools

- [Certificate decoder](https://www.toolcabana.com/es/certificate-decoder)
- [API request builder](https://www.toolcabana.com/es/api-request)
- [JSON to Dart model](https://www.toolcabana.com/es/json-to-dart)
- [JSON to TypeScript](https://www.toolcabana.com/es/json-to-typescript)