Open demo

CSS code

HTML 
<footer class="fgr">
  <div class="inner">
    <div class="brand">
      <p class="logo">prism.studio</p>
      <p>A creative studio making brands, sites, and products that people remember.</p>
      <ul class="soc">
        <li><a href="#" aria-label="Prism Studio on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></svg></a></li>
        <li><a href="#" aria-label="Prism Studio on Dribbble"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3.6 9.6c5.3.6 10.7-.9 14.6-4.6M6 18.9c2.7-4.4 7.8-6.9 14.8-5.3M8.6 3.7c3.5 4.4 5.7 10 6.6 16.8"/></svg></a></li>
        <li><a href="#" aria-label="Prism Studio on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
      </ul>
    </div>
    <div class="grp">
      <nav aria-labelledby="fgr-work"><h2 id="fgr-work">Work</h2>
        <ul><li><a href="#">Case studies</a></li><li><a href="#">Playground</a></li><li><a href="#">Awards</a></li></ul></nav>
      <nav aria-labelledby="fgr-studio"><h2 id="fgr-studio">Studio</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Process</a></li><li><a href="#">Join us</a></li></ul></nav>
      <div><h2>Contact</h2>
        <ul><li><a href="mailto:[email protected]">[email protected]</a></li><li><a href="tel:+351210000000">+351 210 000 000</a></li><li><a href="#">Lisboa, PT</a></li></ul></div>
    </div>
  </div>
  <div class="base"><p>© Prism Studio</p><p>Made with too much coffee</p></div>
</footer>
CSS 
/* Creative gradient footer: brand with glass social buttons, three link groups, a soft light blob and a thin base row.
   The gradient stops are dark enough for white text, and the blob stays faint, so every line of text keeps 4.5:1. */
.fgr{--fgr-a:#4f46e5;--fgr-b:#6d28d9;--fgr-c:#be185d;
  position:relative;overflow:hidden;padding:56px 32px 28px;background:linear-gradient(140deg,var(--fgr-a),var(--fgr-b) 45%,var(--fgr-c));color:#fff;line-height:normal}
.fgr,.fgr *{box-sizing:border-box}
.fgr h2,.fgr p,.fgr ul{margin:0;padding:0}
.fgr ul{list-style:none}
.fgr a{color:#fff;text-decoration:none;border-radius:4px}
.fgr a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fgr::before{content:"";position:absolute;top:-90px;right:-60px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.1);filter:blur(10px)}
.fgr .inner{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;max-width:1000px;margin:0 auto}
.fgr .logo{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.fgr .logo~p{font-size:.88rem;color:rgba(255,255,255,.9);max-width:32ch;margin-top:10px;line-height:1.6}
.fgr .soc{display:flex;gap:9px;margin-top:18px}
.fgr .soc a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  transition:background .15s,color .15s,transform .15s}
.fgr .soc a:hover{background:#fff;color:var(--fgr-b);transform:translateY(-3px)}
.fgr .soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fgr .grp{display:flex;flex-wrap:wrap;gap:30px 54px}
.fgr h2{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:13px}
.fgr .grp a{display:block;padding:4px 0;font-size:.87rem;color:rgba(255,255,255,.9)}
.fgr .grp a:hover{color:#fff;text-decoration:underline}
.fgr .base{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:1000px;margin:44px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.22);font-size:.78rem;color:rgba(255,255,255,.85)}
@media (max-width:639.98px){.fgr{padding:48px 20px 26px}}
@media (prefers-reduced-motion:reduce){.fgr *{transition:none!important}.fgr .soc a:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fgr">
  <div class="inner">
    <div class="row justify-content-between">
      <div class="brand col-12 col-md-auto">
        <p class="logo">prism.studio</p>
        <p>A creative studio making brands, sites, and products that people remember.</p>
        <ul class="soc list-unstyled d-flex gap-2 mb-0">
          <li><a class="btn" href="#" aria-label="Prism Studio on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></svg></a></li>
          <li><a class="btn" href="#" aria-label="Prism Studio on Dribbble"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3.6 9.6c5.3.6 10.7-.9 14.6-4.6M6 18.9c2.7-4.4 7.8-6.9 14.8-5.3M8.6 3.7c3.5 4.4 5.7 10 6.6 16.8"/></svg></a></li>
          <li><a class="btn" href="#" aria-label="Prism Studio on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
        </ul>
      </div>
      <div class="grp col-12 col-md-auto d-flex flex-wrap">
        <nav aria-labelledby="fgr-work"><h2 id="fgr-work">Work</h2>
          <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Case studies</a></li><li class="nav-item"><a class="nav-link" href="#">Playground</a></li><li class="nav-item"><a class="nav-link" href="#">Awards</a></li></ul></nav>
        <nav aria-labelledby="fgr-studio"><h2 id="fgr-studio">Studio</h2>
          <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Process</a></li><li class="nav-item"><a class="nav-link" href="#">Join us</a></li></ul></nav>
        <div><h2>Contact</h2>
          <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="mailto:[email protected]">[email protected]</a></li><li class="nav-item"><a class="nav-link" href="tel:+351210000000">+351 210 000 000</a></li><li class="nav-item"><a class="nav-link" href="#">Lisboa, PT</a></li></ul></div>
      </div>
    </div>
  </div>
  <div class="base d-flex flex-wrap justify-content-between"><p class="mb-0">© Prism Studio</p><p class="mb-0">Made with too much coffee</p></div>
</footer>
CSS 
/* Bootstrap .row with auto-width columns, .nav.flex-column link groups and glass .btn social icons on a gradient panel. */
.fgr{--fgr-a:#4f46e5;--fgr-b:#6d28d9;--fgr-c:#be185d;
  position:relative;overflow:hidden;padding:56px 32px 28px;background:linear-gradient(140deg,var(--fgr-a),var(--fgr-b) 45%,var(--fgr-c));color:#fff;line-height:normal}
.fgr::before{content:"";position:absolute;top:-90px;right:-60px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.1);filter:blur(10px)}
.fgr .inner{position:relative;max-width:1000px;margin:0 auto}
.fgr .inner>.row{--bs-gutter-x:36px;--bs-gutter-y:36px}
.fgr .logo{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin:0}
.fgr .logo~p{font-size:.88rem;color:rgba(255,255,255,.9);max-width:32ch;margin:10px 0 0;line-height:1.6}
.fgr .soc{margin-top:18px}
.fgr .soc .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:#fff;--bs-btn-bg:rgba(255,255,255,.16);--bs-btn-border-color:rgba(255,255,255,.25);--bs-btn-border-radius:11px;
  --bs-btn-hover-color:var(--fgr-b);--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-active-color:var(--fgr-b);--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s,transform .15s}
.fgr .soc .btn:hover{transform:translateY(-3px)}
.fgr .soc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fgr .grp{gap:30px 54px}
.fgr h2{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:normal;color:rgba(255,255,255,.85);margin-bottom:13px}
.fgr .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:4px;--bs-nav-link-font-size:.87rem;--bs-nav-link-font-weight:400;--bs-nav-link-color:rgba(255,255,255,.9);--bs-nav-link-hover-color:#fff}
.fgr .nav-link{align-self:flex-start;border-radius:4px}
.fgr .nav-link:hover{text-decoration:underline}
.fgr .base{position:relative;gap:10px;max-width:1000px;margin:44px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);font-size:.78rem;color:rgba(255,255,255,.85)}
.fgr a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
@media (max-width:639.98px){.fgr{padding:48px 20px 26px}}
@media (prefers-reduced-motion:reduce){.fgr *{transition:none!important}.fgr .soc .btn:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="relative overflow-hidden bg-linear-[140deg] from-[#4f46e5] via-[#6d28d9] via-45% to-[#be185d] px-5 pt-12 pb-[26px] leading-[normal] text-white before:absolute before:-top-[90px] before:-right-[60px] before:size-80 before:rounded-full before:bg-white/10 before:blur-[10px] before:content-[''] sm:px-8 sm:pt-14 sm:pb-7 [&_a]:rounded [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-white">
  <div class="relative mx-auto flex max-w-[1000px] flex-wrap justify-between gap-9">
    <div>
      <p class="text-[1.3rem] font-bold tracking-[-.02em]">prism.studio</p>
      <p class="mt-2.5 max-w-[32ch] text-[.88rem] leading-[1.6] text-white/90">A creative studio making brands, sites, and products that people remember.</p>
      <ul class="mt-[18px] flex gap-[9px] [&_a]:flex [&_a]:size-9 [&_a]:items-center [&_a]:justify-center [&_a]:rounded-[11px]! [&_a]:border [&_a]:border-white/25 [&_a]:bg-white/16 [&_a]:transition [&_a]:duration-150 [&_a:hover]:-translate-y-[3px] [&_a:hover]:bg-white [&_a:hover]:text-[#6d28d9] motion-reduce:[&_a]:transition-none motion-reduce:[&_a:hover]:translate-y-0 [&_svg]:size-4 [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2 [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]">
        <li><a href="#" aria-label="Prism Studio on Instagram"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></svg></a></li>
        <li><a href="#" aria-label="Prism Studio on Dribbble"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M3.6 9.6c5.3.6 10.7-.9 14.6-4.6M6 18.9c2.7-4.4 7.8-6.9 14.8-5.3M8.6 3.7c3.5 4.4 5.7 10 6.6 16.8"/></svg></a></li>
        <li><a href="#" aria-label="Prism Studio on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
      </ul>
    </div>
    <div class="flex flex-wrap gap-x-[54px] gap-y-[30px] [&_h2]:mb-[13px] [&_h2]:text-[.72rem] [&_h2]:font-extrabold [&_h2]:tracking-[.1em] [&_h2]:text-white/85 [&_h2]:uppercase [&_ul_a]:block [&_ul_a]:py-1 [&_ul_a]:text-[.87rem] [&_ul_a]:text-white/90 [&_ul_a:hover]:text-white [&_ul_a:hover]:underline">
      <nav aria-labelledby="fgr-work"><h2 id="fgr-work">Work</h2>
        <ul><li><a href="#">Case studies</a></li><li><a href="#">Playground</a></li><li><a href="#">Awards</a></li></ul></nav>
      <nav aria-labelledby="fgr-studio"><h2 id="fgr-studio">Studio</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Process</a></li><li><a href="#">Join us</a></li></ul></nav>
      <div><h2>Contact</h2>
        <ul><li><a href="mailto:[email protected]">[email protected]</a></li><li><a href="tel:+351210000000">+351 210 000 000</a></li><li><a href="#">Lisboa, PT</a></li></ul></div>
    </div>
  </div>
  <div class="relative mx-auto mt-11 flex max-w-[1000px] flex-wrap justify-between gap-2.5 border-t border-white/22 pt-5 text-[.78rem] text-white/85"><p>© Prism Studio</p><p>Made with too much coffee</p></div>
</footer>

About this set

A bold footer for creative studios and agencies. A diagonal gradient runs from indigo through violet to pink, with a soft blurred light in the top corner, and carries the studio name, a one-line description, three glass social buttons for Instagram, Dribbble and X, and three link groups: Work, Studio and Contact. The contact group uses real mailto: and tel: links, so the address and phone number work on phones. A thin translucent divider leads to a base row with the copyright and a sign-off line. The gradient stops were darkened slightly from the original and the light blob made fainter, so the white and near-white text keeps at least 4.5:1 contrast everywhere on the panel. Social buttons turn solid white with violet icons on hover and lift a few pixels unless reduced motion is requested. Below 640px the padding tightens and the groups wrap under the brand. The Bootstrap version uses a .row with auto-width columns, .nav.flex-column link groups and .btn social icons; Tailwind builds the gradient with bg-linear and via stops.

What’s included

  • Three-stop diagonal gradient with a soft light blob
  • Glass social buttons with inline SVG icons
  • mailto: and tel: links in the contact group
  • White text tuned to keep 4.5:1 on every stop
  • Hover lift removed for reduced motion

Accessibility

Work and Studio are nav elements labelled by their headings, and each social link has a name such as Prism Studio on Instagram with its icon hidden. Every link shows a 2px white focus outline. Text colours are white at 85 to 100 percent opacity on gradient stops chosen for 4.5:1, and transitions stop under prefers-reduced-motion.

Customise it

Change the gradient stops --fgr-a, --fgr-b and --fgr-c on .fgr in the plain CSS and Bootstrap versions; Bootstrap social buttons also read --bs-btn-*. In Tailwind edit from-[#4f46e5], via-[#6d28d9] and to-[#be185d].