Generador de Degradados CSS
Crea degradados CSS lineales, radiales y cónicos de forma visual. Agrega paradas de color, ajusta ángulos y copia el CSS listo para usar.
Tipo de degradado
background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%);
Degradados predefinidos
Cómo usar esta herramienta
- Elige un tipo de degradado — Lineal, Radial o Cónico — usando los botones en la parte superior del editor.
- Ajusta el ángulo (para degradados lineales y cónicos) o la posición central (para radiales) para controlar la dirección.
- Edita las paradas de color: haz clic en una muestra de color para abrir el selector, arrastra el control deslizante de posición y ajusta la opacidad.
- Haz clic en '+ Agregar parada' para insertar más colores, o en el ícono de papelera para eliminar una parada.
- Haz clic en 'Copiar CSS' para copiar el código, 'Descargar PNG' para guardar el degradado como imagen, o 'Compartir URL' para obtener un enlace compartible.
¿Por qué usar nuestro Generador de Degradados CSS?
Crear degradados CSS a mano significa memorizar la sintaxis y adivinar valores de ángulo. Nuestro editor visual se actualiza en tiempo real mientras arrastras paradas y eliges colores. La salida siempre incluye las reglas estándar y con prefijo -webkit- para que tu degradado funcione en todos los navegadores modernos.
Preguntas frecuentes
¿Cómo agrego transparencia a un degradado CSS?
Usa el control deslizante de opacidad junto a cada parada de color. La herramienta genera valores rgba(), por lo que cada parada puede tener su propio nivel de transparencia. Una parada con 0% de opacidad se desvanece hasta ser completamente transparente.
¿Qué es un degradado cónico?
Un degradado cónico barre los colores alrededor de un punto central — como una rueda de colores — en lugar de a lo largo de una línea recta (lineal) o hacia afuera desde un centro (radial). Se usa comúnmente para gráficos circulares y animaciones de carga.
¿Cómo uso un degradado como fondo CSS?
Copia el CSS generado y pégalo en tu hoja de estilos. Por ejemplo: .elemento { background: linear-gradient(135deg, #6366f1, #ec4899); }.
¿Cuál es la diferencia entre degradados lineales y radiales?
Un degradado lineal transiciona colores a lo largo de una línea recta en un ángulo dado. Un degradado radial irradia desde un punto central en forma circular o elíptica.
¿Este generador produce CSS compatible con los navegadores?
Sí. La salida siempre incluye la versión con prefijo -webkit- junto con la propiedad CSS estándar, asegurando compatibilidad con Safari y navegadores basados en Chromium más antiguos.
Herramientas relacionadas
Generador de Tablas Markdown
Crea tablas Markdown visualmente o pega desde Excel, Google Sheets o CSV. Configura la alineación de columnas y exporta GFM.
UUID Generator
Generate random UUIDs for apps, databases, and APIs.
Analizador de Meta Tags SEO
Analiza title tags, meta descriptions, Open Graph, Twitter Cards y vistas previas sociales de cualquier URL pública.
Base64 Encoder / Decoder
Encode and decode Base64 text quickly and easily.
Herramientas visitadas recientemente
Regex Tester
DeveloperTest and debug regular expressions with real-time match highlighting, group capture, and substitution.
Social Media Image Resizer
ImageResize and crop images to the exact size for Instagram, YouTube, X, Facebook, LinkedIn, TikTok, and Pinterest with one-click presets.
SERP Snippet Preview
DeveloperPreview how your title tag and meta description render in Google, with live pixel-width limits for desktop and mobile.