CSS Styling

WebF provides comprehensive CSS styling support for creating visually rich applications. This guide covers backgrounds, borders, shadows, and filters with real examples from the WebF showcase.

Background Colors & Images

Linear Gradients

WebF supports CSS linear gradients with multiple directions and color stops:


/* Basic linear gradient (default: top to bottom) */
background: linear-gradient(red, blue);
 
/* Directional gradients */
background: linear-gradient(to top, red, blue);
background: linear-gradient(to bottom, red, blue);
background: linear-gradient(to left, red, blue);
background: linear-gradient(to right, red, blue);
 
/* Diagonal gradients */
background: linear-gradient(to top left, rgba(255,0,0,0.8), rgba(0,0,255,0.8));
background: linear-gradient(to top right, rgba(255,0,0,0.8), rgba(0,0,255,0.8));
background: linear-gradient(to bottom right, rgba(255,0,0,0.8), rgba(0,0,255,0.8));
background: linear-gradient(to bottom left, rgba(255,0,0,0.8), rgba(0,0,255,0.8));
 
/* Angle-based gradients */
background: linear-gradient(45deg, #f43f5e, #3b82f6);
background: linear-gradient(135deg, #22c55e, #eab308);
 
/* Multiple color stops */
background: linear-gradient(green 40%, yellow 30%, blue 70%);
background: linear-gradient(green 40%, yellow 40%, blue 70%);
 
/* Transparent stops */
background: linear-gradient(to right, rgba(59,130,246,0.8), transparent);
background: linear-gradient(to bottom, rgba(244,63,94,0.8), rgba(244,63,94,0));
 
/* Repeating linear gradients */
background: repeating-linear-gradient(90deg, #111827 0 8px, #e5e7eb 8px 16px);
background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #fde68a 10px 20px);

Radial Gradients

Create circular or elliptical gradients with radial-gradient:


/* Basic radial gradient */
background: radial-gradient(red, blue);
background: radial-gradient(circle, red, blue);
 
/* Size keywords */
background: radial-gradient(ellipse closest-side, #3b82f6, #06b6d4, #0ea5e9);
background: radial-gradient(ellipse farthest-side, #f43f5e, #ef4444, #f97316);
background: radial-gradient(circle closest-corner, #22c55e, #16a34a, #15803d);
background: radial-gradient(circle farthest-corner, #a78bfa, #6366f1, #2563eb);
 
/* Positioning */
background: radial-gradient(circle at top left, #f59e0b, #f97316, #ef4444);
background: radial-gradient(circle at 20% 80%, #10b981, #22d3ee);
background: radial-gradient(ellipse at right center, #e11d48, #fb7185, #fecdd3);
background: radial-gradient(circle at 70% 30%, #14b8a6, #0ea5e9, #6366f1);
 
/* Explicit radii */
background: radial-gradient(100px 50px at center, #ef4444, #22c55e);
background: radial-gradient(60% 40% at 30% 70%, #eab308, #f97316, #ef4444);
 
/* Multiple color stops and hard stops */
background: radial-gradient(circle, #333 0%, #333 50%, #eee 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse, #60a5fa 0 20%, #a78bfa 20% 40%, #f472b6 40% 60%, #fb7185 60% 80%, #f59e0b 80% 100%);
 
/* Repeating radial gradients */
background: repeating-radial-gradient(circle at center, #111827 0 6px, #e5e7eb 6px 12px);
background: repeating-radial-gradient(ellipse at 40% 60%, #16a34a 0 8px, #dcfce7 8px 16px);

Conic Gradients

Create pie-chart-like gradients with conic-gradient:


/* Basic conic gradient */
background: conic-gradient(from 0deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red);
 
/* Custom starting angle and position */
background: conic-gradient(from 90deg at right center, #fde047, #f97316, #ef4444, #a855f7, #3b82f6, #22c55e, #fde047);

Background Properties

WebF supports comprehensive background properties:


/* Background repeat */
background-repeat: repeat;        /* Default */
background-repeat: repeat-x;      /* Horizontal only */
background-repeat: repeat-y;      /* Vertical only */
background-repeat: no-repeat;     /* No repetition */
background-repeat: space;         /* Space between tiles */
background-repeat: round;         /* Stretch tiles to fit */
 
/* Background position */
background-position: left top;
background-position: center center;
background-position: right 20px bottom 10px;
background-position: 50% 10px;
 
/* Background size */
background-size: auto;           /* Default */
background-size: cover;          /* Cover entire area */
background-size: contain;        /* Fit within area */
background-size: 50px auto;      /* Explicit width */
background-size: auto 50px;      /* Explicit height */
 
/* Background origin & clip */
background-origin: border-box;   /* Include border */
background-origin: padding-box;  /* Include padding (default) */
background-origin: content-box;  /* Content area only */
 
background-clip: border-box;     /* Clip to border (default) */
background-clip: padding-box;    /* Clip to padding */
background-clip: content-box;    /* Clip to content */
 
/* Background attachment */
background-attachment: scroll;   /* Scrolls with element (default) */
background-attachment: fixed;    /* Fixed to viewport */

Multiple Backgrounds

Layer multiple backgrounds by separating them with commas:


/* Multiple images with different positions */
background-image: url(image1.png), url(image2.png);
background-repeat: no-repeat, no-repeat;
background-position: left 10px top 10px, right 10px bottom 10px;
background-size: 50px 50px, 70px 70px;
 
/* Mix images, gradients, and colors */
background-image: url(flower.gif), linear-gradient(to bottom, green, pink), linear-gradient(to bottom left, red, yellow, blue);
background-size: 50px auto;
background-repeat: repeat, no-repeat;
 
/* Layered gradients (stripes over gradient) */
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 6px, rgba(255,255,255,0.0) 6px 12px), linear-gradient(135deg, #60a5fa, #22d3ee);
 
background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.15) 0 8px, rgba(0,0,0,0) 8px 16px), linear-gradient(180deg, #fda4af, #fdba74);
 
/* Layered radial gradients */
background-image: radial-gradient(closest-side at 30% 40%, rgba(255,255,255,0.6), rgba(255,255,255,0)), radial-gradient(circle at 70% 60%, #22d3ee, #3b82f6);
 
/* Debug grid overlay */
background-image: url(flower.gif), linear-gradient(#0000 24px, rgba(0,0,0,0.15) 25px), linear-gradient(90deg, #0000 24px, rgba(0,0,0,0.15) 25px);
background-repeat: no-repeat, repeat, repeat;
background-position: center, top left, top left;
background-size: 60px 60px, 25px 25px, 25px 25px;

Borders

Border Shorthand

The border shorthand combines width, style, and color:


/* Basic borders */
border: thin solid #222;
border: medium dashed #1f2937;
border: 10px solid orange;
border: medium solid #0000ff;
 
/* Special values */
border: 0 none transparent;      /* No border */
border: 10px hidden red;         /* Hidden border */
 
/* Using currentColor */
border: 4px dashed currentColor;
color: #8b5cf6;                  /* Border inherits text color */
 
/* With transparency */
border: 4px solid rgba(0,0,0,0.25);

Per-Side Borders

Control each border side individually:


/* Individual border sides */
border-top: 8px solid #f97316;
border-right: 8px dashed #111827;
border-bottom: 8px double #16a34a;
border-left: 8px solid #0ea5e9;
 
/* Multi-value width (top, right, bottom, left) */
border-width: 2px 4px 8px 12px;
border-style: solid;
border-color: #374151;
 
/* Only show specific sides */
border-width: 10px;
border-style: solid;
border-color: transparent transparent #ef4444 transparent;  /* Only bottom */

Border Radius

Create rounded corners with border-radius:


/* Basic radii */
border-radius: 4px;
border-radius: 8px;
border-radius: 16px;
border-radius: 24px;
border-radius: 50%;              /* Circle */
border-radius: 9999px;           /* Pill shape */
 
/* Four-value syntax (TL, TR, BR, BL) */
border-radius: 4px 8px 12px 16px;
border-radius: 8px 50px 30px 5px;
border-radius: 15px 50px 30px 5px;
 
/* Two-value syntax (TL/BR, TR/BL) */
border-radius: 100px 30px;
 
/* Elliptical radii (horizontal / vertical) */
border-radius: 2em / 5em;
border-radius: 2em 1em 4em / 0.5em 3em;
border-radius: 1em 2em 4em 4em / 1em 2em 2em 8em;
border-radius: 100px 30px / 10px;
border-radius: 50% / 20%;
 
/* Per-corner properties */
border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
 
/* Combined per-corner */
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
 
/* With borders */
border: 6px solid #374151;
border-radius: 12px;
 
border-width: 2px 4px 8px 12px;
border-style: solid;
border-color: #ef4444;
border-radius: 20px;
 
/* Multi-color borders with radius */
border-style: solid;
border-width: 6px;
border-color: #f59e0b #10b981 #ef4444 #3b82f6;
border-radius: 10px 30px 60px 35px;

Background Clipping with Border Radius

Border radius clips background images and gradients:


/* Image with border radius */
border-radius: 24px;
background-image: url(flower.gif);
background-size: cover;
background-position: center;
 
/* Gradient with elliptical radius */
border-radius: 40px 10px / 20px 50px;
background-image: linear-gradient(135deg, #60a5fa, #f472b6);

Box Shadow

Basic Shadows

Box shadows add depth to elements:


/* Basic syntax: offset-x offset-y [blur] [color] */
box-shadow: 6px -6px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 5px 5px 10px 10px rgba(255,0,255,.5);
box-shadow: 0.5em 1em gold;

Spread and Negative Spread

The spread parameter expands or contracts the shadow:


/* Zero offset with spread creates outline effect */
box-shadow: 0 0 0 6px #60a5fa;
 
/* Negative spread reduces shadow size */
box-shadow: 0 0 10px -3px rgba(0,0,0,.5);
box-shadow: 0 8px 24px -6px rgba(0,0,0,.3);

Inset Shadows

Inset shadows create inner depth:


box-shadow: inset 6px -6px teal;
box-shadow: inset 10px 5px 5px black;
box-shadow: inset 5px 5px 10px 10px rgba(255,0,255,.5);

Multiple Shadows

Layer multiple shadows by separating with commas:


/* Multiple outset shadows */
box-shadow: 3px 3px red, 6px 6px olive;
box-shadow: 3px 3px red, -1em 0 0.4em blue;
 
/* Combine outset and inset */
box-shadow: 20px 20px 20px 10px rgba(255,0,255,.5), inset 5px 15px 20px 10px rgba(0,255,255,.5);
 
box-shadow: 20px -10px 20px 10px rgba(0,255,255,.5), inset 5px 15px 20px 10px rgba(255,0,255,.5);

Elevation Presets

Create Material Design-style elevation:


/* Elevation level 1 */
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 1px rgba(0,0,0,0.06);
 
/* Elevation level 2 */
box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
 
/* Elevation level 3 */
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
 
/* Elevation level 4 */
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

Focus Rings

Create accessible focus indicators:


/* Simple ring */
box-shadow: 0 0 0 3px rgba(56,189,248,0.7);
 
/* Ring with white offset */
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6;
 
/* Ring using currentColor */
color: #8b5cf6;
box-shadow: 0 0 0 6px currentColor;

Shadows with Backgrounds

Combine shadows with background images or gradients:


/* Image with inset shadow */
box-shadow: inset 0 0 20px rgba(0,0,0,0.35);
border-radius: 16px;
background-image: url(flower.gif);
background-size: cover;
background-position: center;
 
/* Gradient with glow */
box-shadow: 0 0 24px 0 rgba(59,130,246,0.5);
border-radius: 16px;
background-image: linear-gradient(135deg, #60a5fa, #f472b6);

CSS Filters

WebF supports CSS filter functions for visual effects:

Blur


/* Blur filter */
filter: blur(4px);      /* blur-sm */
filter: blur(12px);     /* blur-md */

Color Adjustments


/* Grayscale */
filter: grayscale(100%);    /* Full grayscale */
filter: grayscale(50%);     /* Partial grayscale */
 
/* Sepia */
filter: sepia(100%);
 
/* Brightness */
filter: brightness(0.5);    /* Dim */
filter: brightness(1.5);    /* Bright */
 
/* Contrast */
filter: contrast(0.5);      /* Low contrast */
filter: contrast(1.5);      /* High contrast */
 
/* Hue Rotate */
filter: hue-rotate(90deg);
filter: hue-rotate(180deg);
 
/* Invert */
filter: invert(100%);
 
/* Saturate */
filter: saturate(0);        /* Muted/desaturated */
filter: saturate(2);        /* Vibrant/oversaturated */
 
/* Opacity */
filter: opacity(0.5);

Drop Shadow

Drop shadow applies to the element’s shape, not its box:


/* Basic drop shadow */
filter: drop-shadow(0 10px 8px rgba(0,0,0,0.5));
 
/* Colored drop shadow */
filter: drop-shadow(0 10px 8px rgba(255,0,0,0.5));

Best Practices

Performance: Gradients are more performant than background images for simple patterns
Multiple Backgrounds: List backgrounds from top to bottom layer order
Border Radius: Use percentage values (50%) for circles, large px values (9999px) for pills
Box Shadow: Use subtle shadows for elevation, avoid extreme blur values
Filters: Be mindful that filters can impact performance, especially on complex layouts
Accessibility: Ensure sufficient contrast ratios when using transparency or filters

Next Steps

CSS Layout - Master Flexbox, positioning, and flow layouts
CSS Animations - Add motion with transforms, transitions, and keyframes
Responsive Design - Build adaptive interfaces with media queries