Lab.

A digital sketchbook, where I make things for fun and learn as I go.

Entries: 16
Started: Nov 2022
Last entry: Jan 2025

2025

16Rflect LandingLanding page2025Live ↗Code ↗
15DefineWeb app2025Live ↗Code ↗

2024

14Weather MiniWeb app2024Live ↗Code ↗

2023

13AI AssistantWeb app2023Live ↗Code ↗
12Accent ColorUpdatedCSS study2023
11World ClockWeb app2023Live ↗Code ↗
10Transform TilesUpdatedCSS study2023
09Index TilesUpdatedCSS study2023
08Gradient VariationsUpdatedCSS study2023
07100 Days of CSSChallenge2023Live ↗Code ↗
06NYC TravelLanding page2023Live ↗Code ↗

2022

05Word CycleCSS study2022
04OmnifoodLanding Page2022Live ↗Code ↗
03Link HoversCSS study2022
02ValorantLanding page2022Live ↗Code ↗
01HogwartsLanding page2022Live ↗Code ↗

Palette

Conic · 1 layer

Off-center

The starting angle and center point can both move. This one starts at 45° and sits low-left.

background:
  conic-gradient(from 45deg at 25% 75%, var(--s5), var(--s7), var(--s8), var(--s6), var(--s2));

Linearfrom a line

Radialfrom a point

Conicfrom an angle

Layeredfrom a stack

#1f9fb0

Cycle hues

Look at the check mark in the selected boxes. Browsers choose a light or dark mark to keep it readable against the accent. Try the pale yellow, then the deep blue.