Gradient Dark Banner

About This Pattern

A banner with a gradient dark image as background, and a heading with an overline text.

Use This Pattern

To use this pattern click the button below then paste the content directly into your website’s editor. Please note that you will need to update any placeholder images in the pattern. For some themes, colors and mobile breakpoints may also need adjustments.


<!-- wp:kadence/rowlayout {"uniqueID":"914_3fb43a-0b","tabletLayout":"row","collapseOrder":"right-to-left","colLayout":"equal","currentOverlayTab":"gradient","minHeight":500,"bgColor":"palette3","bgImg":"https://kadence-tru.trubox.ca/wp-content/uploads/sites/3146/2025/03/greg-shield-GA3NfIOHkUg-unsplash.jpg","bgImgPosition":"0% 100%","overlay":"#ffffff","overlaySecond":"#000000","overlayFirstOpacity":1,"overlaySecondOpacity":0,"overlayGradLoc":19,"overlayGradAngle":90,"overlayOpacity":100,"align":"full","verticalAlignment":"middle","firstColumnWidth":50,"secondColumnWidth":50,"tabletPadding":["lg","","lg",""],"tabletBackground":[{"enable":false,"bgColor":"","bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat","forceOverDesk":false,"type":"gradient","gradient":"linear-gradient(0deg,rgb(6,147,227) 0%,rgb(20,39,109) 100%)"}],"tabletOverlay":[{"enable":true,"currentOverlayTab":"normal","overlay":"palette3","overlaySecond":"#00B5E2","overlayGradLoc":0,"overlayGradLocSecond":100,"overlayGradType":"linear","overlayGradAngle":180,"overlayBgImg":"","overlayBgImgID":"","overlayBgImgSize":"cover","overlayBgImgPosition":"center center","overlayBgImgAttachment":"scroll","overlayBgImgRepeat":"no-repeat","overlayOpacity":80,"overlayBlendMod":"none","gradient":"linear-gradient(0deg,var(\u002d\u002dglobal-palette8,#F7FAFC) 46%,rgba(247,250,252,0) 100%)","overlayBlendMode":"normal"}],"mobileOverlay":[{"enable":false,"currentOverlayTab":"gradient","overlay":"palette9","overlaySecond":"rgba(255,255,255,0.06)","overlayGradLoc":50,"overlayGradLocSecond":100,"overlayGradType":"linear","overlayGradAngle":110,"overlayBgImg":"","overlayBgImgID":"","overlayBgImgSize":"cover","overlayBgImgPosition":"center center","overlayBgImgAttachment":"scroll","overlayBgImgRepeat":"no-repeat","overlayOpacity":90,"overlayBlendMod":"none","gradient":"linear-gradient(180deg,var(\u002d\u002dglobal-palette8,#F7FAFC) 61%,rgba(247,250,252,0.95) 100%)"}],"inheritMaxWidth":true,"minHeightTablet":400,"bgColorClass":"theme-palette3","overlayGradient":"linear-gradient(90deg,var(\u002d\u002dglobal-palette3) 0%,rgba(247,250,252,0) 81%)","padding":["xxl","","xxl",""],"mobilePadding":["sm","","sm",""],"margin":["","","xxl",""],"kbVersion":2} -->
<!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"914_e938bf-92","textAlign":["","left",""],"textColor":"palette9","direction":["vertical","",""],"verticalAlignment":"","kbVersion":2,"className":"inner-column-1"} -->
<div class="wp-block-kadence-column kadence-column914_e938bf-92 kb-section-dir-vertical inner-column-1"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"uniqueID":"914_24acd7-dd","color":"palette1","letterSpacing":1,"typography":"var( \u002d\u002dglobal-heading-font-family, inherit )","fontWeight":"600","margin":["","","0",""],"tabletMargin":["","","0",""],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"textTransform":"uppercase","colorClass":"theme-palette1","enableTextShadow":true,"textShadow":[{"enable":true,"color":"palette3","blur":10,"hOffset":1,"vOffset":1}],"htmlTag":"span"} -->
<span class="kt-adv-heading914_24acd7-dd wp-block-kadence-advancedheading has-theme-palette-1-color has-text-color" data-kb-block="kb-adv-heading914_24acd7-dd">Overline</span>
<!-- /wp:kadence/advancedheading -->

<!-- wp:kadence/advancedheading {"level":1,"uniqueID":"914_717020-fa","margin":["0","","0",""],"tabletMargin":["0","","",""],"markBorder":"","markBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"tabletMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"mobileMarkBorderStyles":[{"top":[null,"",""],"right":[null,"",""],"bottom":[null,"",""],"left":[null,"",""],"unit":"px"}],"enableTextShadow":true,"textShadow":[{"enable":true,"color":"palette3","blur":1,"hOffset":1,"vOffset":1}],"fontSize":["xl","xl",""]} -->
<h1 class="kt-adv-heading914_717020-fa wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading914_717020-fa">Project Title</h1>
<!-- /wp:kadence/advancedheading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum aliquam diam mattis suscipit. Morbi rutrum, turpis sit amet consequat varius, nunc dui imperdiet ante, vel ornare lectus orci a nisl.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"borderWidth":["","","",""],"uniqueID":"914_8a44b6-84","vstablet":true,"vsmobile":true,"kbVersion":2,"className":"inner-column-2"} -->
<div class="wp-block-kadence-column kadence-column914_8a44b6-84 kvs-md-false kvs-sm-false inner-column-2"><div class="kt-inside-inner-col"></div></div>
<!-- /wp:kadence/column -->
<!-- /wp:kadence/rowlayout -->