Generador de fondos con patrón de rayas
Crea fondos CSS a rayas ajustando ángulo, color y grosor
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta genera patrones de rayas en tiempo real con repeating-linear-gradient, desde rayas diagonales y raya diplomática hasta patrones de advertencia y bastón de caramelo. Es útil para diseñadores y desarrolladores web que necesitan código CSS rápido para banners, fondos de secciones o elementos decorativos, y todo el proceso ocurre en el navegador sin enviar nada a un servidor.
Cómo usar
- Haz clic en uno de los presets (Diagonal, Raya diplomática, Advertencia, Bastón de caramelo, Pastel) para empezar
- Ajusta el control de ángulo y los dos controles de grosor para dar forma a las rayas
- Elige los dos colores con el selector de color o escribiendo el código HEX
- Revisa la vista previa y copia el código CSS generado para usarlo en tu proyecto
Preguntas frecuentes
- ¿Dónde se usa el CSS generado?
- Pégalo directamente como valor de background-image; no necesitas ninguna imagen, el patrón se dibuja solo con CSS.
- ¿Puedo exportarlo como archivo de imagen?
- No, la herramienta solo genera código CSS, ideal cuando quieres un fondo ligero y editable en vez de una imagen estática.
- ¿Se verá igual en todos los navegadores?
- repeating-linear-gradient es una función CSS estándar bien soportada en todos los navegadores modernos.