CSS Gradient Generator

Diseña gradients CSS linear, radial y conic con preview en vivo

🔒 100% en el browser🆓 Gratis para siempre⚡ Sin sign-up
Nota: La interfaz de la herramienta de abajo por ahora solo está en inglés. Estamos traduciéndolas una a una. Ver esta herramienta en inglés →
0%
100%

Cómo funciona

  1. 1
    Elige tipo de gradient

    Linear, radial o conic - el preview se actualiza al instante.

  2. 2
    Agrega o mueve color stops

    Drag los sliders para reposicionar, click en + para agregar más stops, edita los hex directo.

  3. 3
    Copy el CSS

    Sacá una declaración 'background: …' lista para producción.

Sobre CSS Gradient Generator

CSS gradient generator gratis online. Crea gradients linear, radial o conic con color stops ilimitados, ajusta ángulos con preview en vivo y copia CSS listo para producción. Corre entero en tu browser. CSS Gradient Generator en 712 Tools corre entero dentro de tu browser con APIs nativas de JavaScript - ningún server ve tus datos. Eso significa resultados al instante, privacidad total y sin límites de upload.

Ya sea para una sesión de debug, una comprobación rápida o un incidente en producción, esta herramienta es gratis y sin límite de usos. Sin watermarks, sin sign-up y sin ads dentro de la herramienta.

Preguntas frecuentes

¿Qué browser support tienen?

linear- y radial-gradient andan en todos los browsers post-2013. conic-gradient necesita un browser de 2020 en adelante.

¿Puedo usar CSS variables en los stops?

Sí, pero esta tool usa hex para el color picker. Podés search-replace los hex por var(--tu-token) en el CSS copiado.

¿Cómo agrego varios gradients?

Chainealos en una sola property background, separados por comas. Esta tool arma uno a la vez - layerea vos en tu CSS.

Leer más

5 min de lectura

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

5 min de lectura

Tailwind to plain CSS: migration, extraction, and component patterns

You inherited a Tailwind codebase and want to extract a component library. Or you're moving away from Tailwind entirely. Here's how the utility classes map to real CSS.

4 min de lectura

CSS box-shadow patterns that look professional (not cheap)

A single 5px shadow makes any UI look like a bootstrapped 2015 landing page. Here are the layered-shadow patterns that modern design systems use - Material, Tailwind, Apple.

4 min de lectura

CSS gradient patterns that actually look good (and the two that don't)

Two colors and a 45° angle is not a gradient - it's a shortcut to a design that looks like every SaaS site from 2018. Here's how to build ones that don't.

Herramientas relacionadas

Color Converter

Convierte entre HEX, RGB, HSL y CMYK con preview en vivo

Palette Generator

Genera paletas de color armoniosas desde un color base

Box Shadow

Diseña box-shadows CSS multi-layer con preview en vivo

Contrast Checker

Chequeá contraste texto/background contra WCAG 2.1 AA y AAA - preview en vivo

Glassmorphism

Diseñá cards CSS de frosted-glass con preview en vivo y código copy-ready

Physics Editor

Editor de hitbox de sprites gratis online - auto-traceá collision polygons y exportá para Phaser, Matter.js, Rapier o cualquier engine 2D