Generador de efecto de página doblada en CSS
Crea al instante un efecto de esquina de papel doblado en CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta genera un aspecto de papel doblado en la esquina de una tarjeta o interfaz de documento. Elige una de las cuatro esquinas, ajusta el tamaño del pliegue, la intensidad de la sombra y los colores de la tarjeta y del reverso, observa la vista previa en tiempo real y copia el CSS terminado directamente en tu proyecto. Todo se procesa en el navegador, sin enviar datos a ningún servidor.
Cómo usar
- Elige una esquina entre las cuatro pestañas: superior derecha, superior izquierda, inferior derecha o inferior izquierda.
- Usa los deslizadores para ajustar el tamaño del pliegue y la opacidad de la sombra según prefieras.
- Define el color de la tarjeta y el color del reverso del pliegue con el selector de color o el campo de texto.
- Revisa la vista previa y pulsa 'Copiar CSS' para obtener el código terminado.
Preguntas frecuentes
- ¿Puedo pegar el CSS generado directamente en mi sitio?
- Sí, es CSS puro con una clase .curl-card y el estilo correspondiente del pseudoelemento ::before; solo ajústalo al nombre de clase de tu propio elemento.
- ¿Puedo doblar varias esquinas a la vez?
- La herramienta genera el código de una esquina a la vez. Para varias esquinas, genera el CSS de cada dirección y combínalos bajo nombres de clase distintos.
- ¿Funciona el efecto sin ninguna imagen?
- Sí, es CSS puro: un degradado de fondo recorta la esquina en diagonal y un pseudoelemento con un degradado coincidente y un filtro drop-shadow crea el aspecto doblado.