Styling

All visual styles live in style.css. Edit that file directly to change any of the values described below.

Background

The body uses a white base color with three radial gradients that produce a subtle sky-blue tint in the corners and top center.

style.css

body {
    background-color: #ffffff;
    background-image:
        radial-gradient(at 0% 0%, hsla(210,100%,98%,1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(220,100%,97%,1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(210,100%,98%,1) 0, transparent 50%);
}

To change the base color, update background-color. To shift the tint, adjust the hue values in the hsla() functions. The first argument is the hue (0–360): 210 and 220 are blue tones.

To create a warmer, sunrise-style background, try hues around 30–45 (orange/amber) or 270–290 (purple/violet).

Example — soft warm tint:

style.css

body {
    background-color: #fffdf8;
    background-image:
        radial-gradient(at 0% 0%, hsla(40,100%,98%,1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(35,100%,97%,1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(40,100%,98%,1) 0, transparent 50%);
}

Card / container

The .container class controls the white card that centers the app’s content.

style.css

.container {
    background: #ffffff;
    padding: 3rem;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid #f0f0f0;
    text-align: center;
    width: 350px;
}

Make the card wider — increase width:

style.css

.container {
    width: 480px;
}

Add a dark mode variant — use a prefers-color-scheme media query:

style.css

@media (prefers-color-scheme: dark) {
    body {
        background-color: #0d0d0d;
        background-image:
            radial-gradient(at 0% 0%, hsla(210,50%,10%,1) 0, transparent 50%),
            radial-gradient(at 50% 0%, hsla(220,50%,8%,1) 0, transparent 50%),
            radial-gradient(at 100% 0%, hsla(210,50%,10%,1) 0, transparent 50%);
    }

    .container {
        background: #1a1a1a;
        border-color: #2a2a2a;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.2);
    }
}

border-radius: 24px gives the card its rounded corners. Set it to 0 for sharp corners or 12px for a subtler rounding.

Typography

The app uses the Inter typeface with a system font fallback:

style.css

body {
    font-family: 'Inter', -apple-system, sans-serif;
}

To swap in a different font, load it from Google Fonts in index.html and update the font-family value in style.css.

Add the Google Fonts link to index.html

Place the <link> tag inside <head>, before the stylesheet:

index.html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

Update font-family in style.css

style.css

body {
    font-family: 'DM Sans', -apple-system, sans-serif;
}

Keep -apple-system, sans-serif as a fallback so the app still renders cleanly if the web font fails to load.

Button colors

The “Check Weather” button and the forecast tab buttons (#getWeather, .tab-btn) are styled in style.css. Find those selectors in the file and update the background-color, color, and border properties to match your preferred palette.

The primary blue used throughout the app is #007bff. Keeping your button color consistent with this value maintains visual cohesion with the icon and accent colors.

Animation speed

The sun and rain icons follow an arc path above the logo using the weatherArcPath keyframe animation. The animation property is set on .sun-icon, .rain-icon:

style.css

.sun-icon, .rain-icon {
    animation: weatherArcPath 6s linear infinite;
}

The second value (6s) is the duration. Decrease it to speed up the arc, or increase it to slow it down.

.sun-icon, .rain-icon {
    animation: weatherArcPath 3s linear infinite;
}

.sun-icon, .rain-icon {
    animation: weatherArcPath 12s linear infinite;
}

.sun-icon, .rain-icon {
    animation: weatherArcPath 6s ease-in-out infinite;
}

Setting the duration below 1s can cause the animation to feel janky on lower-end devices. Values between 3s and 10s tend to look best.

Get Started

Features

Customization

Reference

Background

Card / container

Typography

Button colors

Animation speed

​Background

​Card / container

​Typography

​Button colors

​Animation speed

Background

Card / container

Typography

Button colors

Animation speed