Gradients are powerful for adding depth, highlights, or visual interest to backgrounds, buttons, and overlays. All with pure CSS. Head over to your user.css and spice up your Joomla website!

CSS gradients allow you to create smooth transitions between two or more colors without using images. They can be linear (in a straight line), radial (spreading from a center point), or conic (rotating around a center). Gradients are defined using the functions linear-gradient(), radial-gradient(), and conic-gradient() within the background-image property. For example:

background-image: linear-gradient(to right, coral, peachpuff);

This creates a horizontal gradient from coral to peach. 

Explaining everything about gradients would go beyond the scope of this article (CSS Shorts 😉). In this article I will give you some tips and examples, for deeper understanding please refer to the links in the “Further readings” section.

Essential tips for CSS gradients

• Use background-image to apply gradients, not background-color
  Example: background-image: linear-gradient(to right, red, blue);
• Choose the right gradient type
  • linear-gradient() for directional fades
  • radial-gradient() for circular spreads
  • conic-gradient() for angular transitions (like pie charts)
• Control direction with keywords or angles: to bottom right, 45deg, etc.
• Add multiple color stops for smoother transitions
  Example: linear-gradient(to right, red, orange 30%, yellow 60%, green)
• Use repeating-gradient() for patterns
  Example: repeating-linear-gradient(45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px);
• Useful for stripes, grids, or textured backgrounds
• Use transparency for overlays and effects: rgba() or transparent can create fade-ins or soft edges
• Combine gradients with images for layered effects
  background-image: linear-gradient(...), url(...)
• Use browser dev tools to tweak live
  Chrome and Firefox let you adjust gradients interactively
• Keep  accessibility in mind
  Ensure enough contrast between gradient colors and text
• Use tools like CSS Gradient
  Great for visual editing and code generation
• Fallbacks for older browsers
  Provide solid color as a backup: background-color: #ccc;

Examples

A striped line

.deco {
      background-image: repeating-linear-gradient(-45deg,#fff,#fff 6px,#e6e6e6 0,#e6e6e6 8px);
      height: 1em;
}

The same line as pseudo-element for a heading:

h2::after {
    content: "";
    display: block;
    background: repeating-linear-gradient(-45deg, #fff, #fff 6px, #e6e6e6 0, #e6e6e6 8px);
    height: 1rem;
}

Decorative border for images

img {
    border-radius: 50%;
    aspect-ratio: 1/1;
    object-fit: cover;
    padding: 6px;
    background-image: linear-gradient(143deg,rgb(199, 197, 184) 0%, rgb(253, 151, 53) 53%, rgb(255, 103, 69) 100%);
    width: 80%;
    margin-inline: auto;
    display: block;
}

Button with animated background color on hover

button {
    border: 0;
    border-radius: .25rem;
    box-shadow: 0 4px 12px 0 rgba(152, 160, 180, 10);
    background-color: peachpuff;
    background-image: linear-gradient(to right, coral, peachpuff);
    padding: 1rem 2rem;
    font-size: 1.5rem;
    transition: background-color 2s ease;
    &:hover {
        background-color: coral;
        background-image: none;
    }
 }

Cassiopeia Header and Footer

Joomla's core template, Cassiopeia, comes with built-in gradients.

.container-header {
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,var(--cassiopeia-color-hover)100%);
}
.footer {
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,var(--cassiopeia-color-hover)100%);
}

You can change the gradient by changing the values of the CSS variables
--cassiopeia-color-primary and --cassiopeia-color-hover or by defining your own gradient in your user.css:

.container-header {
    --cassiopeia-color-primary: #fa5a1f;
    --cassiopeia-color-hover: #f67ec7;
}

.footer {
    background-color: #3F5EFB;
    background-image: linear-gradient(190deg,rgb(63, 94, 251) 0%, rgb(252, 70, 107) 100%);
}

Further readings:

• Understanding Gradients
• Using CSS gradients
• Animating Gradients: A Guide to Smooth Transitions in CSS