New England
Connecticut Maine Massachusetts New Hampshire Rhode Island Vermont
Middle Atlantic
New Jersey New York Pennsylvania
East North Central
Illinois Indiana Michigan Ohio Wisconsin
West North Central
Iowa Kansas Minnesota Missouri Nebraska North Dakota South Dakota
South Atlantic
Delaware District of Columbia Florida Georgia Maryland North Carolina South Carolina Virginia West Virginia
East South Central
Alabama Kentucky Mississippi Tennessee
West South Central
Arkansas Louisiana Oklahoma Texas
Mountain
Arizona Colorado Idaho Montana Nevada New Mexico Utah Wyoming
Pacific
Alaska California Hawaii Oregon Washington
U.S. Territories
Puerto Rico U.S. Virgin Islands

Free · no sign-up needed

Create a free weather widget for your website

10 widget styles, any city, county or state in the United States, colors that match your site and an embed code in under a minute. Works with WordPress, Blogger and any HTML page.

See the guide

1 Choose a location
2 Choose a widget style
3 Forecast days
4 Colors
5 Display & size

10 ready-made weather widget styles

Click "Use this style" to load it into the builder above and customise it further.

Style 1 · Classic Current weather + vertical list of days
Style 2 · Feature card Large colored temperature block + days ahead
Style 3 · Horizontal bar A single row, ideal for footers / banners
Style 4 · Compact Current weather only, very light
Style 5 · Hourly Current weather + next 8 hours
Style 6 · Temperature table Days with low – high temperature bars
Style 7 · Day grid One tile per day, in a grid
Style 8 · Dark Sleek dark card for dark-themed sites
Style 9 · Alerts & hurricanes Current weather + NWS alert and hurricane status
Style 10 · Sea & tides Next high / low tides, waves and sea state (coastal states)
Build your own widget Pick a location, match your site's colors and get the embed code in the builder above. Start building →

How to create and add a weather widget to your website

Just copy and paste, no coding needed. The widget updates its weather data automatically, so there's nothing else to do.

  1. 1
    Choose a location

    Type a city, county, state or ZIP code into the "Choose a location" box and click the matching result.

  2. 2
    Choose a style

    Pick 1 of 10 styles (9 shows NWS weather alerts and hurricanes, 10 shows tides for coastal places). Vertical styles (1, 2, 6, 8) suit sidebars; style 3 suits footers; style 4 suits narrow spaces.

  3. 3
    Choose days & colors

    Choose 3, 5 or 7 days. Click a preset palette or pick each color to match your website.

  4. 4
    Copy the embed code

    The preview updates as you make changes. When you're happy, click Copy code.

  5. 5
    Paste it into your website

    Paste the code where you want it to appear (see the platform guides below), save and reload the page.

Add it to a sidebar or footer

  1. Go to Appearance → Widgets in your WordPress dashboard.
  2. Add a Custom HTML block to the area you want, for example "Sidebar".
  3. Paste the embed code into the block and click Update.

Add it inside a post or page

  1. Open the post, click the + button and choose the Custom HTML block.
  2. Paste the embed code, click Preview to check it, then Update.
  3. In the Classic Editor: switch to the Text tab before pasting.
  1. Open your Blogger dashboard and choose Layout.
  2. In the area where you want the widget, click Add a Gadget → choose HTML/JavaScript.
  3. Paste the embed code into the content box, add a title (optional) and click Save.
  4. To add it inside a post: open the post, switch to HTML view and paste the code.
  1. Open the page's HTML file (for example index.html).
  2. Paste the embed code where you want it inside the <body> tag, for example inside <div class="sidebar">.
  3. Save the file, upload it to your server and reload the page.
<div class="sidebar">
  <!-- Paste the weather widget embed code here -->
</div>
  1. In your site builder (Wix, Squarespace, Google Sites, Shopify…), add an Embed / HTML / Code element.
  2. Paste the embed code into that element.
  3. Resize the element to match the height in the code (the height attribute) so the widget isn't cut off.

Frequently asked questions

Is the widget free?

Completely free, with no account needed. Just keep the credit link at the bottom of the widget.

Does the widget update automatically?

Yes. Every time your page is opened, the widget loads the latest weather data, so you never need to paste the code again.

Does the widget work well on mobile?

Yes. The widget adapts to the width of its container. If you turn on "Fit to container width (100%)", it will be as wide as the column it sits in.

The bottom of the widget is cut off. What should I do?

Increase the height value in the embed code (for example from 330 to 380). Some themes add padding around iframes, so they need a little more height.

How do I change the location or colors after adding it?

Build the widget again on this page with the new options, copy the new code and replace the old code on your website.

Will the widget slow down my website?

Barely. The widget is a lightweight iframe that only loads when visitors scroll to it (the loading="lazy" attribute) and runs no code on your page.