<?xml version="1.0" encoding="utf-8"?>

Types of gradients

Types of gradients

Gradients are a design technique that creates a smooth transition between two or more colors, adding depth, texture, and visual interest to designs. They come in various types, each offering unique effects:

  • Linear gradients: These involves a color transition along a straight line. You can adjust the angle if you need a directional flow, like mimicking sunsets or horizon lines.
  • Radial gradients: They originate from a central point and move outward in a circular pattern. Radial gradients are perfect for creating focal points or simulating light sources in designs.
  • Diamond gradients: These gradients start from the center and extend out in four directions. They're great for highlighting central elements or adding a modern twist to icons and buttons.
  • Angular gradients: Rotating around a starting point, angular gradients introduce a dynamic, circular transition effect. They help convey motion or energy, like in logos or dynamic backgrounds.

Improve your UX & Product skills with interactive courses that actually work