Skip to content

Phase 4 Step 3: CSS gradients #44

@thomasnemer

Description

@thomasnemer

Parent: #41

Goal

Implement CSS gradient functions so that elements can use gradient backgrounds (linear, radial, conic, and repeating variants).

Prerequisites

  • Step 2 (CSS Transforms) — shares the same render pipeline

Implementation

  • Parse linear-gradient(), radial-gradient(), conic-gradient() and their repeating-* variants
  • Add Gradient variant to CSS Value enum with color stops representation
  • Implement fragment shader evaluation: compute color per-pixel from gradient parameters
  • Support gradients in background-image and background shorthand properties
  • Handle multiple color stops, color hints, and angle/position syntax

Tests

  • Parsing tests for all gradient types and repeating variants
  • Color stop interpolation tests
  • Fragment shader output correctness tests
  • Integration tests with background-image and background shorthand

Acceptance Criteria

  • All gradient functions parse correctly with full CSS syntax support
  • Gradients render correctly in the fragment shader
  • Repeating gradients tile properly
  • Gradients work as values for background-image and background

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions