WP Templater
Editor RecipesGradient Section Border (::before)
Editor Recipes

Gradient Section Border (::before)

Add a multi-stop gradient border around each Kadence column inside a row using the Gradient Section Border editor recipe for X-Bar.

What the Gradient Section Border recipe does

Gradient Section Border creates a gradient stroke around each Kadence column inside a selected Row Layout or Section block.

The recipe turns each column into a card-like panel whose border color comes from your design tokens, while the interior of the column stays fully transparent and editable in the block editor.

Gradient Section Border is an Editor Recipe for X-Bar. It attaches to a Kadence Row Layout or Section in the block editor and scopes itself to that block only.

How the gradient border works

The recipe uses a ::before pseudo-element around each Kadence column to render the gradient border without affecting your actual column content.

At the core of the effect are three CSS custom properties:

  • --card-border-width controls how thick the gradient border appears around each column.
  • --card-border-radius controls how rounded the card corners are so you can match your design system.
  • --card-border-gradient defines the multi-stop gradient used for the border colors.

The ::before pseudo-element sits around each column and uses mask-composite: exclude so only the border stroke is visible. The mask keeps the column interior transparent while showing the gradient along the edges, which makes the columns feel like cards that respond to your global design tokens.

Apply the recipe in X-Bar

Use this flow when you want every column in a Kadence row or section to show the gradient card border.

Select your Kadence Row Layout or Section

  • Open the block editor for the page or template you want to style.
  • Click the Kadence Row Layout or Kadence Section block that contains the columns you want to turn into cards.
  • Confirm in the sidebar that you have the parent row or section selected, not an individual column.

Open X-Bar for the selected block

  • With the Kadence Row Layout or Section still selected, open X-Bar so the X-Bar editor focuses on that block.
  • Check that the X-Bar editor shows you are editing CSS for the currently selected row or section.

Paste the Gradient Section Border recipe

  • Copy the Gradient Section Border (::before) recipe from your recipe library.
  • Paste the recipe into the X-Bar editor while the Kadence Row Layout or Section is still selected.
  • The recipe uses the Kadence selector keyword so the CSS applies only to that specific row or section in its rendered output.

Adjust your design tokens if needed

  • Tweak your design system values for --card-border-width, --card-border-radius, or --card-border-gradient if you want a different border thickness, corner rounding, or gradient.

  • Reload or preview the page: each Kadence column inside the row now renders with a gradient card border while keeping the interior transparent.

  • If you use KickStarter, replace the hardcoded radius in the recipe from --card-border-radius: 12px; to --card-border-radius: var(--border-radius-md); so the cards stay aligned with your global border radius scale.

  • Replace the dummy gradient:

    linear-gradient(
    45deg,
    hsl(240deg 100% 20%) 0%,
    hsl(226deg 100% 27%) 8%,
    hsl(219deg 100% 33%) 17%,
    hsl(215deg 100% 38%) 25%,
    hsl(211deg 100% 41%) 33%,
    hsl(206deg 100% 43%) 42%,
    hsl(200deg 100% 43%) 50%,
    hsl(193deg 100% 41%) 58%,
    hsl(183deg 100% 38%) 67%,
    hsl(170deg 100% 40%) 75%,
    hsl(158deg 100% 43%) 83%,
    hsl(147deg 100% 47%) 92%,
    hsl(137deg 100% 50%) 100%
)

    with your custom gradient. Generate a gradient you like using Josh Comeau's gradient generator and paste its linear-gradient(...) value in place of the dummy version.

If the border does not appear, confirm that:

  • The recipe is attached to the parent Kadence Row Layout or Section.
  • The Kadence selector keyword is present so the CSS is scoped correctly.
  • Your theme or tokens define values for the --card-border-* custom properties.

Why this recipe is scoped to the row

Block editor recipes for X-Bar attach directly to Kadence Row Layout and Section blocks, not to individual columns.

By scoping the Gradient Section Border recipe to the parent row or section using the Kadence selector keyword:

  • The recipe can target each column inside that row consistently.
  • You keep your column content clean while the ::before pseudo-element handles the visual border.
  • You can reuse the same recipe on multiple rows, with each instance only affecting its own block.

This keeps your gradient borders maintainable and aligned with the way Kadence structures columns inside rows and sections.

Use these pages to explore more editor and frontend recipes that layer on top of X-Bar and Kadence.

CSS-Recipes overview

See how block editor recipes attach to Kadence blocks, how scoping works, and where to paste each snippet in X-Bar.

Container Badge (::before)

Add a label-style badge anchored to a container using a ::before pseudo-element in the editor.

Inline Badge (::after)

Create inline badges that attach to text using an ::after pseudo-element inside the block editor.

Separator Line

Insert decorative separator lines with pseudo-elements to visually group content in your layouts.

Was this page helpful?

Last updated today

Built with Documentation.AI