Skip to main content
FreeToolkit .ai

Generador de Degradados Radiales CSS Crea degradados radiales CSS con forma, posición y colores personalizados.

Generador de Degradados Radiales illustration
🎨

Generador de Degradados Radiales

Crea degradados radiales CSS con forma, posición y colores personalizados.

1

Selecciona Colores

Establece el color del centro y el color del borde para el degradado.

2

Configura Forma

Selecciona la forma circular o elíptica y establece la posición del centro.

3

Copia Código CSS

Copia el código CSS generado para tu proyecto.

Loading tool...

What Is Generador de Degradados Radiales?

Un generador de gradientes radiales crea gradientes CSS que se irradian hacia afuera desde un punto central en un patrón circular o elíptico. A diferencia de los gradientes lineales que transitan a lo largo de una línea recta, los gradientes radiales crean efectos de reflectores, orbes brillantes y efectos de profundidad que se utilizan comúnmente en el diseño web moderno. Puedes controlar la forma del gradiente (círculo o elipse), la posición central y los colores. El generador produce código CSS radial-gradient() que funciona en todos los navegadores modernos. Los gradientes radiales son particularmente efectivos para crear profundidad visual, efectos de reflector en secciones destacadas, fondos decorativos y sutiles efectos de iluminación que hacen que los diseños planos parezcan más dimensionales.

Why Use Generador de Degradados Radiales?

  • Opciones de formas circulares y elípticas para diferentes efectos
  • Posición del centro ajustable con controles deslizantes X/Y
  • Vista previa en vivo que se actualiza al cambiar la configuración
  • Salida de CSS limpia y lista para producción
  • Gratis, sin necesidad de registrarse

Common Use Cases

Efectos de Enfoque

Crea efectos de enfoque llamativos en secciones destacadas o imágenes de productos.

Efectos de Resplandor

Genera fondos de orbes resplandecientes para tarjetas, modales o elementos decorativos.

Profundidad y Dimensión

Agrega profundidad visual a diseños planos con transiciones radiales de color sutiles.

Efectos de Vineta

Crea vinetas oscuras sobre imágenes para un look cinematográfico.

Technical Guide

CSS radial-gradient() crea un gradiente que irradia desde un punto. La sintaxis es: radial-gradient(forma en posición, color1, color2). La forma puede ser "círculo" (radio uniforme en todas las direcciones) o "elipse" (radio que coincide con la relación de aspecto del elemento). La posición utiliza valores porcentuales (50% 50% es el centro). Las palabras clave de tamaño como closest-side, farthest-corner controlan hasta dónde se extiende el gradiente. Los puntos de color funcionan de la misma manera que en los gradientes lineales. El navegador interpola colores desde el centro hacia afuera en círculos o elipses concéntricos. Los gradientes radiales son componibles: puedes superponer múltiples gradientes radiales utilizando separación por comas en background-image para efectos complejos como múltiples fuentes de luz.

Tips & Best Practices

  • 1
    Utiliza "círculo" para gradientes redondos perfectos y "elipse" para formas con relación de aspecto
  • 2
    Posiciona el centro descentrado (por ejemplo, 30% 30%) para efectos de iluminación asimétricos
  • 3
    Combina múltiples gradientes radiales para efectos complejos de varias fuentes de luz
  • 4
    Utiliza transparente como color del borde para efectos sutiles de desvanecimiento sobre fondos
  • 5
    Combina con background-blend-mode para efectos creativos de superposición

Related Tools

Selector de colores - free online tool

Selector de colores

Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.

🎨 Color Tools
Generador de Degradados Lineales - free online tool

Generador de Degradados Lineales

Crea degredados lineales CSS con colores personalizados, ángulo y paradas de color.

🎨 Color Tools
Generador de gradiente cónico - free online tool

Generador de gradiente cónico

Crea gradientes cónicos CSS para gráficas de pastel, ruedas de colores y efectos de barrido.

🎨 Color Tools
Mezclador de Colores - free online tool

Mezclador de Colores

Combina dos colores con una proporción ajustable y observa el gradiente completo.

🎨 Color Tools
Generador de filtros CSS - free online tool

Generador de filtros CSS

Aplica efectos de filtro CSS como desenfoque, brillo, contraste y más con controles visuales.

🎨 CSS & Design

Frequently Asked Questions

Q ¿Cuál es la diferencia entre círculo y elipse?
Círculo crea un gradiente perfectamente redondo sin importar las dimensiones del elemento. Elipse se estira para coincidir con la relación de aspecto del elemento, creando una forma ovalada en elementos no cuadrados.
Q ¿Puedo posicionar el centro en cualquier lugar?
Sí, utilizando los controles deslizantes de posición X e Y (0-100%). El valor predeterminado es 50% 50% (centro). Moverlo crea efectos de iluminación asimétricos y descentrados.
Q ¿Está radial-gradient soportado en todos los navegadores?
Sí, radial-gradient() está soportado en todos los navegadores modernos sin prefijos de proveedor.

About This Tool

Generador de Degradados Radiales is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.