---
title: "Live Weather Card — Free Framer component · Best of Framer"
description: "Free Framer component · by vasp · Cards. Display live weather of your city"
canonical: "https://framer.elliotli.dev/component/live-weather-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Live Weather Card

# Live Weather Card

Display live weather of your city

[View on Framer](https://framer.com/marketplace/components/live-weather-card/?via=elliot-li)

![Live Weather Card preview image 1](https://framer.elliotli.dev/og/component/live-weather-card/7cf1974cf053ec2d/1600x1065.jpg)

## Summary

Display live weather of your city

## Description

A clean live weather widget powered by real-time weather data and precise latitude/longitude coordinates.

Drop it onto your canvas, enter your coordinates, and the component automatically displays the current temperature, weather condition, and detected location name. The card updates its icon and gradient style for sunny, clear, cloudy, rain, storm, and snow states.

To find coordinates, search your city or landmark in Google Maps, right-click the main city area, and copy the latitude and longitude.

### Features:

\- Real-time weather data

\- No API key required

\- Latitude and longitude based accuracy

\- Automatic location name detection

\- Optional custom location name override

\- Celsius and Fahrenheit support

\- Weather-based icons and gradients

\- Built-in fallback values

\- Responsive text truncation for long location names

Perfect for landing pages, dashboards, travel sites, event pages, hotel websites, location-based portfolios, and interactive Framer projects.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3859

## Details

- **Author**: vasp
- **Published**: 2026-07-21
- **Updated**: 2026-07-22
- **Added**: 2026-07-21
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards