Crea hermosas sombras de cuadro CSS sin esfuerzo

Genere impresionantes sombras de cuadro con nuestra interfaz intuitiva. Copie el código CSS y utilícelo en sus proyectos al instante.

Preview

Sombra

Personalízame

CSS Salida

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

Controles

Position

0px
4px

Size

6px
-1px

Color

10%

Options

Presets

Sombra suave Sombra

sombra

Sombra

Sombra

nítido

Contorno

Sombra doble

Efecto

Cómo usar

controles

  • Ajustar eldesplazamiento horizontalpara mover la sombra hacia la izquierda o
  • Ajuste eldesplazamientopara mover la sombra hacia arriba o hacia abajo
  • Aumente eldesenfoquepara suavizar la sombra
  • Use Radio depara aumentar o disminuir el Tamaño total de la sombra
  • Cambie elColor and Opacitypara personalizar la apariencia

Funciones

  • Enable Sombrainsertada para crear un efecto
  • Use Múltiples sombraspara efectos
  • Guardar y cargarPresetspara un acceso rápido a tus sombras
  • Click Sombrapara inspirarse
  • Copie el código CSS generado y péguelo en su proyecto

Related Tools

Crea hermosos degradados CSS sin esfuerzo

Genera impresionantes degradados lineales, radiales y cónicos con nuestra interfaz intuitiva. Copia el código CSS y utilízalo en tus proyectos al instante.

Minificador CSS

Comprima y optimice su código CSS con precisión profesional

Generador de transiciones CSS3

Transición de opacidad suave

Convertir JSON a texto sin esfuerzo

Transforme sus datos JSON en texto sin formato con un solo clic. Rápido, seguro y completamente basado en el navegador.

Conversor de marcas de tiempo

Convierta marcas de tiempo entre diferentes formatos con facilidad.

Decimal a octal

Convierte números decimales a octales sin esfuerzo