CSS Shorts: Gradients

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%);
}