Weather Widget Templates

Use Widget: Aesthetic Weather Widget

This aesthetic weather widget combines a native weather-themed background with refined typography, animated condition icons, and rounded corners. Current temperature, humidity, wind, feels-like temperature, and a five-day forecast form an atmospheric yet readable weather panel.The showcase is configured for Paris in Celsius. Its detailed forecast layout suits destination guides, travel websites, and visually focused personal pages. Customize the location, font, width, and forecast length in the builder.

Use Widget: Simple Weather Widget

This simple weather widget displays a location, condition icon, current temperature, and short weather description in one horizontal card. Light-blue coloring, navy text, and Open Sans typography create a clear, friendly presentation.The showcase uses Sydney weather in Celsius. With no forecast list or extra metric panels, the Current Weather layout suits community websites, local landing pages, and everyday information sections.

Use Widget: Minimal Weather Widget

This minimal weather widget puts the current temperature first in a clean, monochrome card. A white background, charcoal text, subtle gray accents, and square corners create a restrained look for editorial websites, portfolios, and simple dashboards.The showcase is configured for Copenhagen in Celsius. Its Current Temperature layout omits forecast rows and additional weather details so visitors can read the essentials at a glance.

Use Widget: Small Weather Widget

This small weather widget presents a city, current temperature, and condition icon in a compact sidebar card. Pale sky-blue coloring, deep navy text, and Inter typography keep the display readable without taking over the page.Configured for Lisbon in Celsius, the compact current-weather layout leaves out forecast rows and extra detail panels. It suits sidebars, narrow columns, and small dashboard sections.

Use Widget: Cute Weather Widget

This cute weather widget pairs pastel peach and lavender colors with rounded corners, animated weather icons, and friendly typography. Current conditions and a three-day forecast create a cheerful panel for personal websites, blogs, and local guides.The showcase uses London weather in Celsius. Customize the location, palette, font, card width, and forecast length to make the design your own.

Use Widget: Custom Weather Widget

Custom Weather Widget for Vancouver presents a detailed native weather dashboard for visitors checking conditions in Vancouver. It uses a spacious card layout with forest green, ivory, and amber styling, plus animated weather icons and a clear temperature hierarchy.The widget shows current conditions alongside a 5-day forecast in Celsius, with helpful details such as humidity, wind, and feels-like temperature. It works well for travel pages, outdoor planning, and location-based landing pages where people need a quick, readable weather overview on desktop and mobile.

Use Widget: Hourly Weather Widget

This hourly weather widget combines current conditions with a row of upcoming hourly temperatures and weather icons. A midnight-blue background, white typography, and cyan accents create a clear forecast panel for travel pages, city guides, and local dashboards.The showcase is configured for London with Celsius temperatures and animated condition icons. Change the location and customize the colors, font, corners, and width to match your website.