Open demo

CSS code

HTML 
<article class="weather">
  <h2><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> Lisbon, Portugal</h2>
  <div class="now">
    <p class="temp"><span class="sr-only">Now </span>26<sup>°C</sup></p>
    <svg class="big" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 2v2.6M12 19.4V22M3.5 3.5l1.9 1.9M18.6 18.6l1.9 1.9M2 12h2.6M19.4 12H22M3.5 20.5l1.9-1.9M18.6 5.4l1.9-1.9"/></svg>
  </div>
  <p class="cond">Clear and dry</p>
  <p class="hi">H 28° · L 19° · feels like 27°</p>
  <ul class="days" aria-label="Five-day forecast">
    <li><b><abbr title="Tuesday">TUE</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 3v2M12 19v2M4.5 4.5l1.5 1.5M18 18l1.5 1.5M3 12h2M19 12h2"/></svg><span class="sr-only">Sunny, high</span><span>28°</span></li>
    <li><b><abbr title="Wednesday">WED</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 18z"/></svg><span class="sr-only">Cloudy, high</span><span>25°</span></li>
    <li><b><abbr title="Thursday">THU</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 15h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 15z"/><path d="M9 19l-1 2M13 19l-1 2M17 19l-1 2"/></svg><span class="sr-only">Rain, high</span><span>21°</span></li>
    <li><b><abbr title="Friday">FRI</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 18z"/></svg><span class="sr-only">Cloudy, high</span><span>23°</span></li>
    <li><b><abbr title="Saturday">SAT</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 3v2M12 19v2M4.5 4.5l1.5 1.5M18 18l1.5 1.5M3 12h2M19 12h2"/></svg><span class="sr-only">Sunny, high</span><span>27°</span></li>
  </ul>
</article>
CSS 
/* Weather card: a blue gradient panel with a soft highlight (::after), the current reading and a
   five-day strip. The icons are inline SVG; each forecast day carries a visually hidden condition
   so the strip reads as "Tuesday, sunny, 28°" rather than a row of pictures. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.weather{width:330px;max-width:100%;border-radius:22px;padding:24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#2563eb,#1d4ed8 52%,#1e1b4b);box-shadow:0 26px 60px -24px rgba(29,78,216,.6)}
.weather::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;top:-90px;right:-70px;
  background:radial-gradient(circle,rgba(255,255,255,.24),transparent 68%)}
.weather > *{position:relative;z-index:1}
.weather svg{display:block}
.weather h2{font-size:.92rem;font-weight:600;display:flex;align-items:center;gap:7px}
.weather h2 svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.weather .now{display:flex;align-items:center;justify-content:space-between;margin:18px 0 6px}
.weather .temp{font-size:3.6rem;font-weight:300;letter-spacing:-.04em;line-height:1}
.weather .temp sup{font-size:1.4rem;font-weight:400;vertical-align:super}
.weather .big{width:74px;height:74px;stroke:#fde68a;fill:none;stroke-width:1.6}
.weather .cond{font-size:.9rem;color:#e0e7ff}
.weather .hi{font-size:.83rem;color:#d9e1ff;margin-top:3px}
.weather .days{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:22px;list-style:none;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.weather .days li{text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.weather abbr{text-decoration:none}
.weather .days b{font-size:.74rem;font-weight:600;color:#c7d2fe;letter-spacing:.04em}
.weather .days svg{width:22px;height:22px;stroke:#e0e7ff;fill:none;stroke-width:1.8}
.weather .days span:last-child{font-size:.83rem;font-weight:700}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<article class="card weather">
  <div class="card-body">
    <h2 class="card-title d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> Lisbon, Portugal</h2>
    <div class="now d-flex align-items-center justify-content-between">
      <p class="temp mb-0"><span class="visually-hidden">Now </span>26<sup>°C</sup></p>
      <svg class="big" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 2v2.6M12 19.4V22M3.5 3.5l1.9 1.9M18.6 18.6l1.9 1.9M2 12h2.6M19.4 12H22M3.5 20.5l1.9-1.9M18.6 5.4l1.9-1.9"/></svg>
    </div>
    <p class="cond mb-0">Clear and dry</p>
    <p class="hi mb-0">H 28° · L 19° · feels like 27°</p>
    <ul class="days row row-cols-5 list-unstyled mb-0 mx-0 text-center" aria-label="Five-day forecast">
      <li class="col d-flex flex-column align-items-center"><b><abbr title="Tuesday">TUE</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 3v2M12 19v2M4.5 4.5l1.5 1.5M18 18l1.5 1.5M3 12h2M19 12h2"/></svg><span class="visually-hidden">Sunny, high</span><span>28°</span></li>
      <li class="col d-flex flex-column align-items-center"><b><abbr title="Wednesday">WED</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 18z"/></svg><span class="visually-hidden">Cloudy, high</span><span>25°</span></li>
      <li class="col d-flex flex-column align-items-center"><b><abbr title="Thursday">THU</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 15h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 15z"/><path d="M9 19l-1 2M13 19l-1 2M17 19l-1 2"/></svg><span class="visually-hidden">Rain, high</span><span>21°</span></li>
      <li class="col d-flex flex-column align-items-center"><b><abbr title="Friday">FRI</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 18z"/></svg><span class="visually-hidden">Cloudy, high</span><span>23°</span></li>
      <li class="col d-flex flex-column align-items-center"><b><abbr title="Saturday">SAT</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 3v2M12 19v2M4.5 4.5l1.5 1.5M18 18l1.5 1.5M3 12h2M19 12h2"/></svg><span class="visually-hidden">Sunny, high</span><span>27°</span></li>
    </ul>
  </div>
</article>
CSS 
/* Bootstrap .card with a gradient background, and a .row.row-cols-5 for the five-day strip.
   Each forecast day carries a visually hidden condition next to its icon. */
.weather{--bs-card-bg:transparent;--bs-card-border-width:0;--bs-card-border-radius:22px;--bs-card-color:#fff;
  --bs-card-spacer-y:24px;--bs-card-spacer-x:24px;width:330px;max-width:100%;overflow:hidden;
  background:linear-gradient(165deg,#2563eb,#1d4ed8 52%,#1e1b4b);box-shadow:0 26px 60px -24px rgba(29,78,216,.6)}
.weather::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;top:-90px;right:-70px;
  background:radial-gradient(circle,rgba(255,255,255,.24),transparent 68%)}
.weather .card-body{position:relative;z-index:1}
.weather svg{display:block}
.weather .card-title{font-size:.92rem;font-weight:600;line-height:normal;gap:7px;margin:0}
.weather .card-title svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.weather .now{margin:18px 0 6px}
.weather .temp{font-size:3.6rem;font-weight:300;letter-spacing:-.04em;line-height:1}
.weather .temp sup{font-size:1.4rem;font-weight:400;top:0;vertical-align:super}
.weather .big{width:74px;height:74px;stroke:#fde68a;fill:none;stroke-width:1.6}
.weather .cond{font-size:.9rem;color:#e0e7ff}
.weather .hi{font-size:.83rem;color:#d9e1ff;margin-top:3px}
.weather .days{--bs-gutter-x:4px;--bs-gutter-y:0;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18)}
.weather .days li{gap:7px}
.weather abbr{text-decoration:none;cursor:default}
.weather .days b{font-size:.74rem;font-weight:600;color:#c7d2fe;letter-spacing:.04em}
.weather .days svg{width:22px;height:22px;stroke:#e0e7ff;fill:none;stroke-width:1.8}
.weather .days span:last-child{font-size:.83rem;font-weight:700}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<article class="relative w-[330px] max-w-full overflow-hidden rounded-[22px] bg-[linear-gradient(165deg,#2563eb,#1d4ed8_52%,#1e1b4b)] p-6 text-white shadow-[0_26px_60px_-24px_rgba(29,78,216,.6)] after:absolute after:-top-[90px] after:-right-[70px] after:size-[220px] after:rounded-full after:bg-[radial-gradient(circle,rgba(255,255,255,.24),transparent_68%)] [&>*]:relative [&>*]:z-10">
  <h2 class="flex items-center gap-[7px] text-[.92rem] font-semibold"><svg class="block size-[15px] fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 10-14 0c0 5.7 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg> Lisbon, Portugal</h2>
  <div class="mt-[18px] mb-1.5 flex items-center justify-between">
    <p class="text-[3.6rem] leading-none font-light tracking-[-.04em]"><span class="sr-only">Now </span>26<sup class="align-super text-[1.4rem] font-normal">°C</sup></p>
    <svg class="block size-[74px] fill-none stroke-[#fde68a] stroke-[1.6]" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 2v2.6M12 19.4V22M3.5 3.5l1.9 1.9M18.6 18.6l1.9 1.9M2 12h2.6M19.4 12H22M3.5 20.5l1.9-1.9M18.6 5.4l1.9-1.9"/></svg>
  </div>
  <p class="text-[.9rem] text-[#e0e7ff]">Clear and dry</p>
  <p class="mt-[3px] text-[.83rem] text-[#d9e1ff]">H 28° · L 19° · feels like 27°</p>
  <ul class="mt-[22px] grid grid-cols-5 gap-1 border-t border-white/18 pt-[18px] text-center [&_abbr]:no-underline [&_b]:text-[.74rem] [&_b]:font-semibold [&_b]:tracking-[.04em] [&_b]:text-[#c7d2fe] [&_li]:flex [&_li]:flex-col [&_li]:items-center [&_li]:gap-[7px] [&_li>span:last-child]:text-[.83rem] [&_li>span:last-child]:font-bold [&_svg]:block [&_svg]:size-[22px] [&_svg]:fill-none [&_svg]:stroke-[#e0e7ff] [&_svg]:stroke-[1.8]" aria-label="Five-day forecast">
    <li><b><abbr title="Tuesday">TUE</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 3v2M12 19v2M4.5 4.5l1.5 1.5M18 18l1.5 1.5M3 12h2M19 12h2"/></svg><span class="sr-only">Sunny, high</span><span>28°</span></li>
    <li><b><abbr title="Wednesday">WED</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 18z"/></svg><span class="sr-only">Cloudy, high</span><span>25°</span></li>
    <li><b><abbr title="Thursday">THU</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 15h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 15z"/><path d="M9 19l-1 2M13 19l-1 2M17 19l-1 2"/></svg><span class="sr-only">Rain, high</span><span>21°</span></li>
    <li><b><abbr title="Friday">FRI</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 18h10a4 4 0 000-8 6 6 0 00-11.3 2A3.5 3.5 0 007 18z"/></svg><span class="sr-only">Cloudy, high</span><span>23°</span></li>
    <li><b><abbr title="Saturday">SAT</abbr></b><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.6"/><path d="M12 3v2M12 19v2M4.5 4.5l1.5 1.5M18 18l1.5 1.5M3 12h2M19 12h2"/></svg><span class="sr-only">Sunny, high</span><span>27°</span></li>
  </ul>
</article>

About this set

A weather widget card on a deep blue gradient with a soft light spot in the top corner. It shows the location with a pin icon, the current temperature in large light type with a sun icon, the conditions, the day’s high, low and feels-like values, and a five-day strip with a day abbreviation, a condition icon and the high for each day. The icons are inline SVG and the gradient and highlight are plain CSS, so there are no images to load. The forecast is a list, and each day carries visually hidden text such as Sunny, high before its temperature, so a screen reader hears Tuesday, sunny, high 28 degrees instead of a row of unlabelled pictures; the day abbreviations are abbr elements with the full day name. The text colours on the gradient were checked against the lightest part of the background behind them and meet 4.5:1. Use it on dashboards, travel pages and smart-home panels. The Bootstrap version lays the strip out with .row.row-cols-5 inside a .card; the Tailwind version uses grid-cols-5 and an after: pseudo-element for the highlight.

What’s included

  • Current reading, conditions and a five-day strip
  • Inline SVG icons and a CSS-only gradient background
  • Hidden condition text for each forecast day
  • Text colours checked for 4.5:1 on the gradient
  • Bootstrap strip built with .row-cols-5

Accessibility

The location is the card's h2 and the forecast is a list named Five-day forecast. Every icon is aria-hidden, and each day has visually hidden condition text, with abbreviated day names wrapped in abbr. The card has no interactive elements and nothing animates. Faded text is drawn with solid pale colours rather than opacity so the contrast is predictable.

Customise it

The background is the linear-gradient on .weather (a class on the article in Tailwind); if you lighten it, recheck the #d9e1ff and #c7d2fe text. The sun colour is #fde68a on .big, and the card width is 330px.