essay paper for css

• November 20, 2023
• Best in Pak , Big Questions , CSS Past Papers

CSS Essays, CSS Solved Essays, PMS Essays, PMS Solved Essays, CSS 2024, CSS 2025, PMS 2024, PMS 2025, Sir Syed Kazim Ali,

CSS Essays up till 2023

The CSS essay and precis papers have been a nightmare for thousands of aspirants. However, since 2015, these papers have started eroding the future of 95% of aspirants each year, not because of aspirants but because of academies, young qualifiers, and inept teachers. They teach students only tips and tricks rather than teaching them the proper way of writing an essay: how to break the chosen topic down, how to write the thesis statement, what is a relevant and coherent outline, what the topic sentence is, and how to write it; how to articulate thoughts and give specific pieces of evidence to support them; and how to connect sentences or give transitions between them. However, to qualify for the essay paper, aspirants must understand the basics to differentiate between essay writing and daily conversation. For example, in your everyday conversation with your friends and family, you make assertions, and they understand because they know you and never challenge you to give reasons for your statements. On the other hand, the CSS examiner, who reads and evaluates your essays, does not even know you and needs support, reasons, and arguments for each of your assertions. 

Qualifying for the CSS and PMS English essay and precis papers moves around writing skills. Writing is the primary tool that helps an aspirant present his thoughts on the given topic on the exam paper. Therefore, cracking English essay and precis papers requires an aspirant to have good written communication skills. However, that greatly depends upon how rationally, analytically, and logically an aspirant writes and transfers his viewpoints and ideas to the examiner. Competitive aspirants think memorizing facts, figures, and data alone will help them crack these papers. Moreover, aspirants build an analytical approach by learning quality books and content alone; they do not even practice and learn to give their thoughts words. As a result, despite having a great deal of knowledge regarding subjects, aspirants cannot transfer their ideas to the examiner satisfactorily and fail the papers. Therefore, if you need to pass the CSS and PMS essay papers, you must communicate effectively and provide evidence for any point or claim you make. Simply, whoever learns how to support his ideas with specific and relevant reasons usually qualifies for the essay paper easily.

How Can These Solved Essays Help Me Prepare & Qualify for the Essay Paper?

All essays published on the Cssprepforum website have been attempted by Sir Syed Kazim Ali’s students, who either qualified for the CSS or PMS examinations or scored the highest marks in the essay papers. The essays are uploaded to help other CSS & PMS aspirants learn and practice essay writing techniques and patterns to qualify for the essay paper. Reading these essays with great consideration, from the outline to thesis statement and introduction to conclusion, can help you understand how to crack the essay topic, build a thesis statement, write an introduction, and present your arguments based on the thought process. The activity will also help you in several ways:

Developing a Strong Foundation in English Grammar and Usage

Sir Syed Kazim Ali is known for his in-depth English grammar and usage knowledge. His students’ essays can help you build a solid foundation in these areas, essential for writing clear, concise, and grammatically correct essays.

Enhancing Your Critical Thinking and Analytical Skills

The CSS English Essay Paper requires strong critical thinking and analytical skills. Sir Syed Kazim Ali’s teaching methods, present in the solved essays, can help you develop these skills by encouraging you to analyze complex issues, form well-structured arguments, and support your claims with evidence.

Improving Your Essay Writing Skills

Being Pakistan’s best CSS and PMS English essay teacher, Sir Syed Kazim Ali has extensive experience teaching essay writing. His students’ essays guide you through the process of crafting a well-structured essay, from developing a thesis statement to organizing your arguments and providing relevant evidence.

Expanding Your Vocabulary and Knowledge Base

A strong vocabulary and broad knowledge base are crucial for writing compelling essays. These essays can help you expand your vocabulary and enhance your understanding of various topics, enabling you to write informative and insightful essays.

Who is Sir Syed Kazim Ali?

Sir Syed Kazim Ali is a known English language writing coach, grammarian, educationist, and author. He is the founder of Cssprepforum , an online education platform that provides preparation for the Central Superior Services (CSS) and Provincial Management Services (PMS) exams to thousands of aspirants. He is also the founder of Howfiv , an online learning management system (LMS) used by millions of students in Pakistan and worldwide. Sir Syed Kazim Ali is known for his innovative and effective teaching methods. He has helped thousands of students improve their English language skills and succeed in competitive exams such as the CSS, PMS, GRE, GAT, SAT, GMAT, etc. He is a passionate advocate for education and social development. He believes that education is the key to unlocking the potential of individuals and societies. He is actively involved in various educational and social development projects and committed to making a difference in the lives of others.

He is Pakistan’s top CSS and PMS English essay and precis teacher with the highest success rate of his students. The way he explains and simplifies the concepts no other English teacher across the country can do. He knows that CSS and PMS aspirants’ approach to learning the English language is different, and over the years, he has developed a unique teaching methodology that helps his students crack English essays and precis papers easily. His online creative English writing sessions give aspirants the skills and confidence to get the best possible exam results. He focuses on aspirants’ exam’s critical areas, helps them identify their strengths and weaknesses, and equips them with the writing skills they need to correctly and confidently express their thoughts and opinions.

Click on any link to start reading the solved essays

1- * Inter-Cultural Communication is Panacea to Avoid 3rd World War *

Inter-Cultural Communication is Panacea to Avoid 3rd World War

2- * I Fall Upon The Thorns of Life, I bleed! *

I Fall Upon the Thorns of Life, I Bleed!

3- * Frailty Thy Name is Woman *

Frailty Thy Name Is Woman Essay

4- * The Controversial Issues of Feminism and the Contemporary Women’s Rights Movements *

The Controversial Issues of Feminism and the Contemporary Women’s Rights Movements

5- * Inter-Cultural Communication is Panacea to Avoid 3rd World War (2nd Essay) *

Intercultural Communication is Panacea to Avoid 3rd World War

6- * Uni-polar, Bipolar or Multi-polar: New Direction of the World *

Unipolar, Bipolar or Multipolar: New Direction of the World Essay

7- * Pakistani Women Have the Same Chances as Men *

Pakistani Women Have the Same Chances as Men.

8- * Social Media Has Destroyed Real Life Communication *

Social Media Has Destroyed Real Life Communication

9- * It Matters Not What Someone Is Born, But What They Grow To Be *

It Matters Not What Someone is Born, but What They Grow to Be

10- * Artificial Intelligence has Overstepped its Bounds *

Artificial Intelligence has Overstepped its Bounds

11- * Children Must be Taught How to Think, not What to Think *

Children Must be Taught How to Think, not What to Think

12- * The War on Terror has Contributed to the Growing Abuse of Human Rights *

The War on Terror has Contributed to the Growing Abuse of Human Rights

13- * The Cost of Inaction is Greater than the Cost of Action *

The Cost of Inaction is Greater than the Cost of Action

14- * Both Parents Should Assume Equal Responsibility in Raising a Child *

Both Parents Should Assume Equal Responsibility in Raising a Child

15- * Instruction in Youth is Like Engraving in Stone *

Instruction in Youth is like Engraving in Stone

16- * People Have Become Overly Dependent on Technology *

People Have Become Overly Dependent On Technology

17- * A Friend Walks in When Everyone Else Walks Out *

A Friend Walks In When Everyone Else Walks Out

18- * Feminism is Not Really a Third World Issue *

Feminism Is Not Really a Third World Issue

19- * Cooperation, Not Competition, Leads the World Towards Peace and Prosperity *

Cooperation Not Competition Leads the World Towards Peace and Prosperity

20- * I Do Not Agree with What You Have to Say, But I Will Defend to Death Your Right to Say It *

I Do Not Agree With What You Have To Say, But I Will Defend To Death Your Right To Say It

21- * Development is About Transforming Lives of People Rather Than Economy of a State *

Development Is About Transforming Lives of People Rather Than the Economy of a State

22- * Governance Crisis in Pakistan: Need for Reforms and Institutional Building *

Governance Crisis in Pakistan: Need for Reforms and Institutional Building

23- * Education in Pakistan has Failed to Achieve Efficient Human Resource *

Education in Pakistan has failed to Achieve Efficient Human Resource

24- * Advancement in Science and Technology is the Gateway to the Economic Prosperity of a Country *

Advancement in Science and Technology is the Gateway to the Economic Prosperity of a Country

25- * Boys Will be Boys *

Boys Will Be Boys

26- * Digital Democracy: Social Media and Public Participation *

Digital Democracy: Social Media and Public Participation

27- * The Threat of Global Warming and the Ways to Counter it *

The Threat of Global Warming and the Ways to Counter it

28- * Democracy and Illiteracy Do Not Move Together *

Democracy and Illiteracy Do Not Move Together

29- * Classrooms Decide the Future of the Nations *

Classrooms Decide the Future of the Nations

30- * The Fool Speaks, and the Wise Listen *

The Fool Speaks, and the Wise Listen

* For more Essays Click on the Links Below *

* CSS Solved Essays *

https://cssprepforum.com/category/css/css-solved-essays

* PMS Solved Essays *

https://cssprepforum.com/category/pms/pms-essays/

* PMS Solved 20-Marks Paragraphs *

https://cssprepforum.com/category/pms/pms-solved-paragraphs/

* PMS Ministerial Solved Essays *

https://cssprepforum.com/category/featured/pms-ministerial-essays/

Recent Posts

Top Categories

Cssprepforum, education company.

cssprepforum.com

Welcome to Cssprepforum, Pakistan’s largest learning management system (LMS) with millions of questions along with their logical explanations educating millions of learners, students, aspirants, teachers, professors, and parents preparing for a successful future. 

Founder:   Syed Kazim Ali Founded:  2020 Phone: +92-332-6105-842 +92-300-6322-446 Email:  [email protected] Students Served:  10 Million Daily Learners:  50,000 Offered Courses: Visit Courses  

More Courses

Basic English Grammar and Writing Course

Extensive English Essay & Precis Course for CSS and PMS

CSS English Essay and Precis Crash Course for 2023

Subscribe to our mailing list to receives daily updates direct to your inbox.

• CSS Solved Essays
• CSS Solved GSA
• CSS Solved PA
• CSS Solved Islamiat
• Current Affairs
• All Courses
• Writers Club
• All Authors
• All Members
• All Teachers
• Become an Author
• Who is Sir Syed Kazim Ali?
• Privacy Policy

CssPrepForum is Pakistan’s largest and greatest platform for CSS, PMS, FPSC, PPSC, SPSC, KPPSC, AJKPSC, BPSC, GBPSC, NTS, and other One Paper 100 Marks MCQs exams’ students. It has become Pakistan’s most trusted website among CSS, PMS students for their exams’ preparation because of its high-quality preparation material.

@ 2023 Cssprepforum. All RightsReserved.

• 30 Most Asked Questions About Quaid-e-Azam, First Governor General of Pakistan in Competitive Exams
• 30+ Most Important One-Liner MCQs on Motorways and National Highways of Pakistan
• CSS 2021 Essay Paper
• CSS 2022 Essay Paper

CSS-Library

CSS! Not Really Hard Nut to Crack

• Current Affairs
• Daily Current Affairs Update
• European History
• French Revolution
• Gender Studies
• General Knowledge
• Ishtiaque Hussain Rahoojo
• National Issues
• Optional Subjects
• Pakistan Affairs
• Pakistan Affairs MCQs
• Past Papers
• Uncategorized

CSS Past Papers

CSS Past papers are perhaps the most important for CSS preparation after the syllabus. They navigate a CSS aspirant through the complex maze of uncertainty, ill-guidance, and diversion of focus. Past Papers save both the precious time and resources of an aspirant. I have compiled CSS past papers for compulsory and optional subjects keeping in mind the requirements of CSS exams. The organisation of CSS past papers is done in the following four ways:

• Year wise past papers
• Syllabus topic-wise Question bank
• Repeated Pattens of Questions By Topic
• Frequency of Topics Asked as per Syllabus

CSS Compulsory Subjects’ Past Papers

• English (Precis and Compostion)
• General Science and Ability
• Islamic Studies

CSS Optional Subjects’ Past Papers

• International Relations
• Political Science
• Criminology
• Environmental Science
• International Law

CSS-Library is the Largest Platform for CSS and PMS Preparation in Pakistan. We Provide to-the-point, relevant, quality, and updated CSS material which is highly neglected in online platforms. We are also dedicated to help in one paper 100 Marks screening and descriptive paper of FPSC, PPSC, SPSC, KPPSC, BPSC, AJKPSC, NTS, PTS, OTS, Judiciary, Bank Exams and Other Competitive Exams.

Useful Links

• Submit Your Articles
• Submit Policy

Copyright © 2024 CSS-Library.com, All Rights Reserved

• Monthly DAWN Editorials
• Monthly Global Point
• Foreign Affairs Magazines
• The Economist Magazines
• Time Magazines
• Pakistan & India
• Pakistan & USA
• Pakistan & China
• Essay Books
• English Composition Books
• Pakistan Affairs
• Current Affairs
• General Science and Ability
• Islamic Studies
• Essays Books
• English Precis and Compositions Books
• Current Affairs Books
• Pakistan Affairs Books
• General Science and Ability Books
• Islamic Studies Books
• Download Optional Books
• Buy CSS Optional Books
• CSS Syllabus
• CSS Past Papers

• CSS Rules & Regulations
• Buy CSS PMS Books Online

CSS English (Precis and Composition) Past Papers

Download css past papers for compulsory subject english precis & composition from 2000 to 2015 updated. | for more past papers please explore the past papers section..

CSS English (Precis and Composition) Past Papers are a crucial resource for candidates preparing for the CSS exams, which are pivotal in securing positions within Pakistan’s civil services . This section of the examination tests candidates on their ability to understand and analyze English passages, as well as their proficiency in composition and grammar. It challenges aspirants to demonstrate clarity, conciseness, and effectiveness in their English writing skills, underscoring the importance of precise communication in the administrative functions of the government.

The past papers provide invaluable insight into the pattern, difficulty level, and types of questions that have been asked over the years. By studying these papers, candidates can familiarize themselves with the examination’s format, hone their skills in precis writing , comprehension, and essay writing, and thus significantly improve their chances of success. Furthermore, practicing with past papers helps in time management, a critical aspect of the exam. This resource is indispensable for anyone aiming to excel in the CSS English (Precis and Composition) exam, offering a benchmark to gauge one’s preparation and areas needing improvement.

CSS English (Precis & Composition) Past Papers

English (precis & composition) 2000, english (precis & composition) 2001, english (precis & composition) 2002, english (precis & composition) 2003, english (precis & composition) 2004, english (precis & composition) 2005, english (precis & composition) 2006, english (precis & composition) 2007, english (precis & composition) 2008, english (precis & composition) 2009, english (precis & composition) 2010, english (precis & composition) 2011, english (precis & composition) 2012, english (precis & composition) 2013, english (precis & composition) 2014, english (precis & composition) 2015, english (precis & composition) 2016, english (precis & composition) 2017, english (precis & composition) 2018, english (precis & composition) 2019, english (precis & composition) 2020, english (precis & composition) 2021, english (precis & composition) 2022, english (precis & composition) 2023, please review, search book.

• CSS Syllabus
• CSS Past Papers

CSS English Essay Past Papers (PDF Updated)

On this page, you’ll find a compilation of CSS Essay Past Papers for English from 2010 to 2023. These CSS Essay Past Papers serve as a crucial tool for CSS aspirants. Examining these papers enables candidates to grasp the exam’s structure, recognize common topics, and enhance their essay writing abilities. Wishing you the best of luck with your CSS preparations!

• Essay – 2010
• Essay – 2011
• Essay – 2012 
• Essay – 2013
• Essay – 2014
• Essay – 2015
• Essay – 2016
• Essay – 2017
• Essay – 2018
• Essay – 2019
• Essay – 2020
• Essay – 2021
• Essay – 2022
• Essay – 2023

e Book sheir.org

Css 2020 past papers.

CSS | Syllabus | Past Papers | Solved Papers | Preparation | MCQs

Download Past Examination Papers of Central Superior Services (CSS) Pakistan Competitive Examination (CE) 2020 in PDF. CSS 2020 Botany Paper. CSS 2020 Zoology Paper. CSS 2020 Business Administration Paper. — Download CSS 2021 Papers NEW

COMPULSORY SUBJECTS (CSS 2020)–PDF

• Islamic Studies  / Comparative Religions
• General Science
• Pakistan Affairs
• Current Affairs

OPTIONAL SUBJECTS (CSS 2020)–PDF

GROUP – I

• Accountancy & Auditing – I
• Accountancy & Auditing – II
• Economics – I
• Economics – II
• Computer Science – I
• Computer Science – II
• Political Science – I
• Political Science – II
• International Relations – I
• International Relations – II

GROUP – II

• Chemistry-I
• Chemistry-II
• Applied Mathematics
• Pure Mathematics

GROUP – III

• Business Administration
• Public Administration
• Governance & Public Policies
• Town Planning & Urban Management

GROUP – IV

• History of Pakistan & India
• Islamic History & Culture
• British History
• European History
• History of the U.S.A

GROUP – V

• Gender Studies
• Environmental Sciences
• Agriculture & Forestry
• English Literature
• Urdu Literature

GROUP – VI

• Constitutional Law
• International Law
• Muslim Law & Jurisprudence
• Mercantile Law
• Criminology

GROUP – VII

• Journalism & Mass Communication
• Anthropology

Pakistan | FPSC | CSS | NTS | Federal Board | MCQs |  Urdu

• Beginner's Guide
• Past Papers
• CSP Members
• Members List
• Social Groups
• Mark Forums Read

Past Papers

English essay css 2023 past paper.

• Categories CSS 2023 Past Papers
• Date January 27, 2023

CSS-2023 Past Paper of English Essay by FPSC

Tag: CSS 2023 Compulsory

English Composition & Comprehension CSS 2023 Past Paper

Gives me information about essay outline

Leave A Reply Cancel reply

Your email address will not be published. Required fields are marked *

Login with your site account

Remember Me

Home       Disclaimer       Advertise       Contact       Privacy Policy      

Copyright � 2004-16 Paked.com . A ll rights reserved.

Note: Site best viewed at 1024 x 768 or higher screen resolution

• Temani Afif
• May 10, 2024

The Modern Guide For Making CSS Shapes

• 31 min read
• CSS , Tools , Guides
• Share on Twitter ,  LinkedIn

About The Author

Temani was a regular contributor at CSS-Tricks who wrote perhaps more articles than anyone who was not on staff. He loves experimenting with CSS and trying to … More about Temani ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

You have for sure googled “how to create [shape_name] with CSS” at least once in your front-end career if it’s not something you already have bookmarked. And the number of articles and demos you will find out there is endless.

Good, right? Copy that code and drop it into the ol’ stylesheet. Ship it!

The problem is that you don’t understand how the copied code works. Sure, it got the job done, but many of the most widely used CSS shape snippets are often dated and rely on things like magic numbers to get the shapes just right. So, the next time you go into the code needing to make a change to it, it either makes little sense or is inflexible to the point that you need an entirely new solution.

So, here it is, your one-stop modern guide for how to create shapes in CSS ! We are going to explore the most common CSS shapes while highlighting different CSS tricks and techniques that you can easily re-purpose for any kind of shape. The goal is not to learn how to create specific shapes but rather to understand the modern tricks that allow you to create any kind of shape you want.

Table of Contents

You can jump directly to the topic you’re interested in to find relevant shapes or browse the complete list . Enjoy!

Polygons & Starbursts

Parallelograms & trapezoids, circles & holes, border edges, rounded arcs, dashed circles, rounded tabs, tooltips & speech bubbles, cutting corners, section dividers, floral shapes, why not svg.

I get asked this question often, and my answer is always the same: Use SVG if you can! I have nothing against SVG. It’s just another approach for creating shapes using another syntax with another set of considerations. If SVG was my expertise, then I would be writing about that instead!

CSS is my field of expertise, so that’s the approach we’re covering for drawing shapes with code. Choosing CSS or SVG is typically a matter of choice. There may very well be a good reason why SVG is a better fit for your specific needs.

Many times, CSS will be your best bet for decorative things or when you’re working with a specific element in the markup that contains real content to be styled. Ultimately, though, you will need to consider what your project’s requirements are and decide whether a CSS shape is really what you are looking for.

Your First Resource

Before we start digging into code, please spend a few minutes over at my CSS Shape website . You will find many examples of CSS-only shapes. This is an ever-growing collection that I regularly maintain with new shapes and techniques. Bookmark it and use it as a reference as we make our way through this guide.

Is it fairly easy to modify and tweak the CSS for those shapes?

Yes! The CSS for each and every shape is optimized to be as flexible and efficient as possible. The CSS typically targets a single HTML element to prevent you from having to touch too much markup besides dropping the element on the page. Additionally, I make liberal use of CSS variables that allow you to modify things easily for your needs.

Most of you don’t have time to grasp all the techniques and tricks to create different shapes, so an online resource with ready-to-use snippets of code can be a lifesaver!

Clipping Shapes In CSS

The CSS clip-path property — and its polygon() function — is what we commonly reach for when creating CSS Shapes. Through the creation of common CSS shapes, we will learn a few tricks that can help you create other shapes easily.

Let’s start with one of the easiest shapes; the hexagon. We first define the shape’s dimensions, then provide the coordinates for the six points and we are done.

See the Pen [Hexagon shape using clip-path](https://codepen.io/t_afif/pen/JjVJJbG) by Temani Afif .

Easy, right? But what if I told you that there’s an even easier way to do it? Instead of six points, we can get by with just four.

A little-known trick with the polygon() function is that we are allowed to set points that are outside the [0% 100%] range. In other words, we can cut outside the element — which becomes super useful for this shape as well many others, as we’ll see.

We’re basically drawing the shape of a diamond where two of the points are set way outside the bounds of the hexagon we’re trying to make. This is perhaps the very first lesson for drawing CSS shapes: Allow yourself to think outside the box — or at least the shape’s boundaries.

Look how much simpler the code already looks:

Did you notice that I updated the aspect-ratio property in there? I’m using a trigonometric function, cos() , to replace the magic number 0.866 . The exact value of the ratio is equal to cos(30deg) (or sin(60deg) ). Besides, cos(30deg) is a lot easier to remember than 0.866 .

Here’s something fun we can do: swap the X and Y coordinate values. In other words, let’s change the polygon() coordinates from this pattern:

…to this, where the Y values come before the X values:

What we get is a new variation of the hexagon:

See the Pen [Another variation of the hexagon shape](https://codepen.io/t_afif/pen/BaEZrrP) by Temani Afif .

Swapping the X and Y values will make a kind of switch between the vertical and horizontal axes, which will help to get a different shape. Note that I have also updated the ratio to 1/cos(30deg) instead of cos(30deg) . Since we are switching both axes, the new ratio needs to be equal to its inverse, i.e., R (or R/1 ) becomes 1/R .

And since our CSS is nothing more than a single style rule on a single selector, we can apply it to more than a <div> . For example, the following demo includes both variations of the original hexagon, plus a third example that sets the styles on an <img> element.

See the Pen [CSS-only hexagon shapes (the modern way)](https://codepen.io/t_afif/pen/KKEMjxV) by Temani Afif .

There we go, our first shape! We are also walking away with two valuable lessons about creating shapes with CSS:

• The polygon() function accepts points outside the [0% 100%] range. This allows us to clip shapes with fewer points in some cases but also opens up possibilities for creating additional shapes.
• Switching axes is a solid approach for creating shape variations. In the case of a hexagon, swapping the values on the X and Y axes changes the hexagon’s direction.

An octagon is another geometric shape and it is very close in nature to the hexagon. Instead of working with six sides, we’re working with eight to get what looks like the shape of a common traffic stop sign.

Let’s take the first lesson we learned from working with hexagons and clip the element with coordinates outside the shape’s boundaries to keep our clipping efficient. Believe it or not, we can actually establish all eight octagon sides with only four points, just like we used only four points to establish the hexagon’s six sides.

I know that visualizing the shape with outside points can be somewhat difficult because we’re practically turning the concept of clipping on its head. But with some practice, you get used to this mental model and develop muscle memory for it.

Notice that the CSS is remarkably similar to what we used to create a hexagon:

Except for the small trigonometric formula, the structure of the code is identical to the last hexagon shape — set the shape’s dimensions, then clip the points. And notice how I saved the math calculation as a CSS variable to avoid repeating that code.

If math isn’t really your thing — and that’s totally fine! — remember that the formulas are simply one part of the puzzle. There’s no need to go back to your high school geometry textbooks. You can always find the formulas you need for specific shapes in my online collection . Again, that collection is your first resource for creating CSS shapes!

And, of course, we can apply this shape to an <img> element as easily as we can a <div> :

See the Pen [CSS-only octagon shapes (the modern way)](https://codepen.io/t_afif/pen/LYaxqEg) by Temani Afif .

There’s actually more we can do to optimize our code. Consider the following:

See the Pen [Octagon shape with margin-box](https://codepen.io/t_afif/pen/ZEZrLmr) by Temani Afif .

The most obvious difference is that the variable containing the math function ( --o ) is removed, and we have a new one, --w , for setting the shape’s dimensions.

But notice that we’re now setting margin on the shape and declaring a margin-box keyword at the end of the clip-path . It means that the reference for the polygon() is now set to the margin-box instead of the default border-box .

If you look back at Figure 2, notice that the four points used to draw the octagon are outside the shape’s boundaries and have the same distance from those boundaries. Instead of accounting for that distance inside the clip-path , the updated code declares it on the margin property, which makes the values of the coordinates easier to define.

This is the CSS we started with:

The optimization simplifies the clip-path even if we have an extra property:

All the --o variables are removed from the clip-path , and the margin property gets that same value. I had to introduce a new variable, --w , to set the element’s size dimensions because I couldn’t rely on a percentage value. In this particular case, you will end with some margin around the element, but this trick can really help simplify calculations.

If you don’t want the extra margin, you can add padding instead and apply the same amount of padding as a negative margin. That’s another trick to keep polygons simple in a way that works well with images. Here is a demo showing different shapes created with the same clip-path value.

See the Pen [Different shapes using the same polygon](https://codepen.io/t_afif/pen/oNOOWqz) by Temani Afif .

Creating a star shape is always a bit tricky, even if you are comfortable using clip-path with the polygon() function. Clipping requires very precise values, so we either find a ready-to-use snippet of CSS or fuss with it ourselves until we get it right.

And if I were to ask you how many points we need to cut the shape, you might reasonably respond that 10 points are needed. And you are technically correct. But we can do better using only five points!

It may sound impossible to make a star out of only five points, but it’s perfectly possible, and the trick is how the points inside polygon() are ordered. If we were to draw a star with pencil on paper in a single continuous line, we would follow the following order:

It’s the same way we used to draw stars as kids — and it fits perfectly in CSS with polygon() ! This is another hidden trick about clip-path with polygon() , and it leads to another key lesson for drawing CSS shapes: the lines we establish can intersect . Again, we’re sort of turning a concept on its head, even if it’s a pattern we all grew up making by hand.

Here’s how those five points translate to CSS:

See the Pen [Star shape using clip-path](https://codepen.io/t_afif/pen/NWmvBeL) by Temani Afif .

I am using trigonometric functions again for accuracy without resorting to magic numbers, but even if we calculate the values, the code is still better than the traditional 10-point approach:

Since we have a symmetrical shape, note that the second and fifth points on the star share the same Y coordinates. The same is true for the third and fourth points. And notice, too, that the X values have the same distance to the center ( 79% - 50% = 50% - 21% ). If we add those up, we see that the sum is equal to 100% ( 79% + 21% = 100% ).

That leads us to yet another major lesson on drawing CSS shapes: Consider the shape’s symmetry because that’s a big hint that there may be duplicated values. This will reduce your effort in calculating/finding the different values.

We already cut the number of points once from 10 to five. Now, there are only three points to remember — the remaining two can be figured out from there, thanks to symmetry.

Go back to the hexagon and octagon shapes and look for symmetry. You will notice repeated values as well, and the clip-path will suddenly look easier to remember!

We’ve already covered stars, hexagons, and octagons, but what if you are working with an unknown number of points or sides? You may want a solution that is capable of adjusting the number for whatever situation it is used for. For this, we can consider more generic shapes like polygons and starbursts.

The funny thing is that starbursts are basically the exact same thing as polygons, just with half the points that we can move inward.

I often advise people to use my online generators for shapes like these because the clip-path coordinates can get tricky to write and calculate by hand.

• Polygon generator
• Starburst generator

That said, I really believe it’s still a very good idea to understand how the coordinates are calculated and how they affect the overall shape. I have an entire article on the topic for you to learn the nuances of calculating coordinates.

Another common shape we always build is a rectangle shape where we have one or two slanted sides. They have a lot of names depending on the final result (e.g., parallelogram, trapezoid, skewed rectangle, and so on), but all of them are built using the same CSS technique.

First, we start by creating a basic rectangle by linking the four corner points together:

This code produces nothing because our element is already a rectangle. Also, note that 0 and 100% are the only values we’re using.

Next, offset some values to get the shape you want. Let’s say our offset needs to be equal to 10px . If the value is 0 , we update it with 10px , and if it’s 100% we update it with calc(100% - 10px) . As simple as that!

But which value do I need to update and when?

Try and see! Open your browser’s developer tools and update the values in real-time to see how the shape changes, and you will understand what points you need to update. I would lie if I told you that I write all the shapes from memory without making any mistakes. In most cases, I start with the basic rectangle, and I add or update points until I get the shape I want. Try this as a small homework exercise and create the shapes in Figure 11 by yourself. You can still find all the correct code in my online collection for reference.

If you want more CSS tricks around the clip-path property, check my article “ CSS Tricks To Master The clip-path Property ” which is a good follow-up to this section.

Masking Shapes In CSS

We just worked with a number of shapes that required us to figure out a number of points and clip-path by plotting their coordinates in a polygon() . In this section, we will cover circular and curvy shapes while introducing the other property you will use the most when creating CSS shapes: the mask property.

Like the previous section, we will create some shapes while highlighting the main tricks you need to know. Don’t forget that the goal is not to learn how to create specific shapes but to learn the tricks that allow you to create any kind of shape.

When talking about the mask property, gradients are certain to come up. We can, for example, “cut” (but really “mask”) a circular hole out of an element with a radial-gradient :

Why aren’t we using a simple background instead? The mask property allows us more flexibility, like using any color we want and applying the effect on a variety of other elements, such as <img> . If the color and flexible utility aren’t a big deal, then you can certainly reach for the background property instead of cutting a hole.

Here’s the mask working on both a <div> and <img> :

See the Pen [Hole shape](https://codepen.io/t_afif/pen/OJGgGve) by Temani Afif .

It’s here that I’d like to call out yet another lesson for creating shapes in CSS: The colors we use in gradients are completely unimportant when working with mask .

All we care about is the color value’s alpha channel because transparency is what is mask -ed out of the element, establishing the circular hole in the center. The gradient’s opaque colors preserve the visibility of the rest of the element. That’s why you will often see me using a black color value (e.g., #000 ) for the visible part and a transparent color (e.g., #0000 ) for the invisible part.

Notice the hard color stops in the gradient. A smooth transition between colors would lead to blurry lines. If we remove that transition and sharply change from one color to another, we get smooth, sharp edges. But not totally! I prefer to keep a very small transition ( 98% instead of 100% ) to avoid jagged edges.

And with a simple radial-gradient , we can achieve a lot of shapes, like cutting a circle from the top or bottom of an element.

See the Pen [Circular cut from the top & bottom](https://codepen.io/t_afif/pen/MWRvBOL) by Temani Afif .

Let’s change it up and make the cut from the top and the bottom edges at the same time:

See the Pen [Circular Cut at top and bottom](https://codepen.io/t_afif/pen/WNWEKdy) by Temani Afif .

If we give the gradient an explicit size, then it will repeat, resulting in yet another fancy shape, a scooped border:

See the Pen [Scooped edges from top and bottom](https://codepen.io/t_afif/pen/eYoEjVa) by Temani Afif .

Rather than dissecting the code for that last example, I want you to peek at the CSS and see for yourself how the radial-gradient is configured. You will notice that we went from a simple hole to a fancy border decoration by making only a few changes.

The previous demo is one example of many fancy borders we can create. We can go wavy, spiked, scalloped, and more!

Once again, it’s all about CSS masks and gradients. In the following articles, I provide you with examples and recipes for many different possibilities:

• “ Fancy CSS Borders Using Masks ” (CSS-Tricks)
• “ How to Create Wavy Shapes & Patterns in CSS ” (CSS-Tricks)

Be sure to make it to the end of the second article to see how this technique can be used as decorative background patterns .

See the Pen [CSS only pattern](https://codepen.io/t_afif/pen/vYddpzK) by Temani Afif .

This is another instance where CSS gradients are the perfect fit for mask -ing shapes. You’ve probably seen this type of shape a gazillion times because it’s a common pattern for animated loading indications.

This time, we are going to introduce another technique which is “composition”. It’s an operation we perform between two gradient layers. We either use mask-composite to define it, or we declare the values on the mask property.

The figure below illustrates the gradient configuration and the composition between each layer.

We start with a radial-gradient to create a full circle shape. Then we use a conic-gradient to create the shape below it. Between the two gradients, we perform an “intersect” composition to get the unclosed circle. Then we tack on two more radial gradients to the mask to get those nice rounded endpoints on the unclosed circle. This time we consider the default composition, “add”.

Gradients aren’t something new as we use them a lot with the background property but “composition” is the new concept I want you to keep in mind. It’s a very handy one that unlocks a lot of possibilities.

Ready for the CSS?

See the Pen [Progress circle using mask](https://codepen.io/t_afif/pen/eYoEpom) by Temani Afif .

Even if the code looks a bit complex at first glance, the use of CSS variables makes things easier to adjust. That’s an important CSS technique I am using in most of the shapes I have created . Many of them require complex formulas and a lot of gradients, but in the end, all you have to do is adjust a few variables to control the shape. So, let’s not spend too much time explaining the math expressions. I want to focus on the tricks and techniques because the CSS concepts are what is important; remember, you can always grab the math. How CSS uses it is key.

Notice that we can achieve the same result using different gradient combinations. It’s weird because the syntax looks completely different. This snippet accomplishes the same visual result.

I added border-radius in there to round the element and added padding equal to the border’s thickness. Then, if you check the gradient used in the mask , you will see that I have changed the radial-gradient with a linear-gradient containing a single transparent color that covers the element’s content-box .

Sure, there are two more variables using this approach, but I did simplify the overall gradient at the same time. Yet another valid approach for the same effect.

See the Pen [Untitled](https://codepen.io/t_afif/pen/WNWErpV) by Temani Afif .

We can produce additional circular shapes with dashed edges using the same code we just wrote:

See the Pen [Dashed border](https://codepen.io/t_afif/pen/KKvjjZN) by Temani Afif .

This time we’re combining two gradients in our mask . One is a black-to-transparent repeating-conic-gradient and the other is a transparent linear-gradient configured to cover the element up to its content-box and the mask-composite property is set to intersect .

If you want to dig deeper into mask-composite , I advise you to read “ Mask Compositing: The Crash Course ” by Ana Tudor.

Tabs are a super common design pattern. Each tab is connected to a panel of content where clicking a tab reveals that panel of content. Tabs can be rectangular, but we often think of them as rounded, the way they are on actual paper file folders.

We could get clever and use a pseudo-element for the shape that’s positioned behind the set of panels, but that introduces more complexity and fixed values than we ought to have. Instead, we can continue using CSS masks to get the perfect shape with a minimal amount of reusable code.

It’s not really the rounded top edges that are difficult to pull off, but the bottom portion that curves inwards instead of rounding in like the top. And even then, we already know the secret sauce: using CSS masks by combining gradients that reveal just the parts we want.

We start by adding a border around the element — excluding the bottom edge — and applying a border-radius on the top-left and top-right corners.

Next, we add the first mask layer. We only want to show the padding area (i.e., the red area highlighted in Figure 10).

Let’s add two more gradients, both radial, to show those bottom curves.

Here is how the full code comes together:

As usual, all it takes is one variable to control the shape. Let’s zero-in on the border-radius declaration for a moment:

Notice that the shape’s rounded top edges are equal to two times the radius ( --r ) value. If you’re wondering why we need a calculation here at all, it’s because we have a transparent border hanging out there, and we need to double the radius to account for it. The radius of the blue areas highlighted in Figure 13 is equal to 2 * R while the red area highlighted in the same figure is equal to 2 * R - R , or simply R .

We can actually optimize the code so that we only need two gradients — one linear and one radial — instead of three. I’ll drop that into the following demo for you to pick apart. Can you figure out how we were able to eliminate one of the gradients?

I’ll throw in two additional variations for you to investigate:

See the Pen [Rounded tab using CSS mask](https://codepen.io/t_afif/pen/JjVpPmr) by Temani Afif .

I’m often asked how I know when my code can be optimized more than it is. That’s truly the most difficult part of everything we’ve covered so far. I do not have any hard rules for how and when to optimize, and it’s not necessary to find the optimal solution, especially if you are a beginner. My advice is to first find the trivial and easy solution, even if it requires a lot of gradients. Then, with a lot of practice, you will be able to find better solutions.

Talking about practice, here’s your next bit of homework: try creating the shapes illustrated in Figure 15:

These aren’t tabs at all but tooltips! We can absolutely use the exact same masking technique we used to create the tabs for these shapes. Notice how the curves that go inward are consistent in each shape, no matter if they are positioned on the left, right, or both.

You can always find the code over at my online collection if you want to reference it.

More CSS Shapes

At this point, we’ve seen the main tricks to create CSS shapes. You will rely on mask and gradients if you have curves and rounded parts or clip-path when there are no curves. It sounds simple but there’s still more to learn, so I am going to provide a few more common shapes for you to explore.

Instead of going into a detailed explanation of the shapes in this section, I’m going to give you the recipes for how to make them and all of the ingredients you need to make it happen. In fact, I have written other articles that are directly related to everything we are about to cover and will link them up so that you have guides you can reference in your work.

A triangle is likely the first shape that you will ever need. They’re used in lots of places, from play buttons for videos, to decorative icons in links, to active state indicators, to open/close toggles in accordions, to… the list goes on.

Creating a triangle shape is as simple as using a 3-point polygon in addition to defining the size:

But we can get even further by adding more points to have border-only variations:

See the Pen [border-only triangle shapes](https://codepen.io/t_afif/pen/XWGzJpP) by Temani Afif .

Or combine clip-path and mask to get rounded corner variations:

See the Pen [Rounded triangles (the modern way)](https://codepen.io/t_afif/pen/QWovwoW) by Temani Afif .

Please check out my article “ CSS Shapes: The Triangle ” on the Verpex blog for a full explanation of techniques with many examples and variations.

Hearts are another classic shape that’s been tackled with older CSS techniques but have a better modern equivalent. We can pull this off more simply by combining border-image and clip-path :

See the Pen [Heart shape using border-image](https://codepen.io/t_afif/pen/MWPOJpP) by Temani Afif .

Or use mask-border instead of border-image to transform images into hearts:

See the Pen [CSS only heart images](https://codepen.io/t_afif/pen/PoRwjPM) by Temani Afif .

The full explanation with additional examples is available in my article “ CSS Shapes: The Heart ” over at the Verpex blog.

Ribbons were all the rage back when skeuomorphism was the design fad du jour . They’re still awesome today, and I’ve created a big ol’ collection of them with more than 100 shapes.

There are many different types of ribbons, as you might imagine. So, rather than detail one I will provide you with four articles I have written detailing the general technique (more clips!) and a variety of fun variations for you to consider.

• “ CSS Responsive Multi-Line Ribbon Shapes, Part 1 ” (Smashing Magazine)
• “ CSS Responsive Multi-Line Ribbon Shapes, Part 2 ” (Smashing Magazine)
• “ CSS Shapes: The Ribbon ” (Verpex Blog)
• “ How to Create CSS Ribbon Shapes with a Single Element ” (SitePoint)

Like ribbons, there are so many ways we can design a tooltip or a speech bubble; so many that I have another collection showcasing more than 100 of them . The following two-part series provides all of the nitty-gritty details:

• “ Modern CSS Tooltips And Speech Bubbles, Part 1 ” (Smashing Magazine)
• “ Modern CSS Tooltips And Speech Bubbles, Part 2 ” (Smashing Magazine)

By the end, you can literally create as many variations as you can imagine.

Insert your obligatory joke about how we’re supposed to cut corners in life. However, when we cut corners out of squares and rectangles, the result is a nice decorative shape that also works as a frame for images.

We can cut all the corners or just specific ones. We can make circular cuts or sharp ones. We can even create an outline of the overall shape. Take a look at my online generator to play with the code, and check out my full article on the topic where I am detailing all the different cases.

Speaking of visual transitions between sections, what if both sections have decorative borders that fit together like a puzzle?

I hope you see the pattern now: sometimes, we’re clipping an element or masking portions of it. The fact that we can sort of “carve” into things this way using polygon() coordinates and gradients opens up so many possibilities that would have required clever workarounds and super-specific code in years past.

See my article “ How to Create a Section Divider Using CSS ” on the freeCodeCamp blog for a deep dive into the concepts, which we’ve also covered here quite extensively already in earlier sections.

We’ve created circles. We’ve made wave shapes. Let’s combine those two ideas together to create floral shapes .

These shapes are pretty cool on their own. But like a few of the other shapes we’ve covered, this one works extremely well with images. If you need something fancier than the typical box, then masking the edges can come off like a custom-framed photo.

Here is a demo where I am using such shapes to create a fancy hover effect :

See the Pen [Fancy Pop Out hover effect!](https://codepen.io/t_afif/pen/qBQzrwq) by Temani Afif .

There’s a lot of math involved with this, specifically trigonometric functions. I have a two-part series that gets into the weeds if you’re interested in that side of things:

• “ Creating Flower Shapes using CSS Mask & Trigonometric Functions ” (Frontend Masters)
• “ Creating Wavy Circles with Fancy Animations in CSS ” (Frontend Masters)

As always, remember that my online collection is your Number One resource for all things related to CSS shapes. The math has already been worked out for your convenience, but you also have the references you need to understand how it works under the hood.

I hope you see CSS Shapes differently now as a result of reading this comprehensive guide. We covered a few shapes, but really, it’s hundreds upon hundreds of shapes because you see how flexible they are to configure into a slew of variations.

At the end of the day, all of the shapes use some combination of different CSS concepts such as clipping, masking, composition, gradients, CSS variables, and so on. Not to mention a few hidden tricks like the one related to the polygon() function:

• It accepts points outside the [0% 100%] range.
• Switching axes is a solid approach for creating shape variations.
• The lines we establish can intersect.

It’s not that many things, right? We looked at each of these in great detail and then whipped through the shapes to demonstrate how the concepts come together. It’s not so much about memorizing snippets than it is thoroughly understanding how CSS works and leveraging its features to produce any number of things, like shapes.

Don’t forget to bookmark my CSS Shape website and use it as a reference as well as a quick stop to get a specific shape you need for a project. I avoid re-inventing the wheel in my work, and the online collection is your wheel for snagging shapes made with pure CSS.

Please also use it as inspiration for your own shape-shifting experiments. And post a comment if you think of a shape that would be a nice addition to the collection.

• “ CSS Shapes: Polygon & Starburst ” (Verpex Blog)
• “ CSS Tricks To Master The clip-path Property ” (Verpex Blog)
• “ CSS Shapes: The Triangle ” (Verpex Blog)
• “ CSS Shapes: The Heart ” (Verpex Blog)
• “ Tricks to Cut Corners Using CSS Mask and Clip-Path Properties ”
• “ How to Create a Section Divider Using CSS ” (freeCodeCamp Blog)
• “ Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1) ” (Smashing Magazine)
• “ Mask Compositing: The Crash Course ” by Ana Tudor (CSS-Tricks)

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

• CSS Essay Special Exam 2023 Paper

• October 12, 2023
• CSS Past Papers 2023

Here you will find the CSS Essay past paper. This exam is a special exam held in 2023. This is called special competitive exam held by FPSC. Find below the past paper of Essay of CSS special exam 2023.

CSS Past Paper of Essay 2023

The following essay topics were given in the paper of special CSS exam 2023:

1. “It matters not what someone is born, but what they grow to be”.

2. Developing countries must be able to reap the benefits of international trade.

3. Artificial intelligence has overpowered its bounds.

4. No legacy is so rich as honesty.

5. Social media has destroyed real life communication.

6. Globalization: The end of austerity.

7. Children must be taught how to thin, not what to think.

8. Pakistani women have the same chances as men.

9. Unipolar, bipolar or multipolar: new direction of the world.

10. So, surely with hardship comes ease.

View the CSS Essay Past Paper 2023:

• CSS Notes & Study Material
• See other CSS Past Papers
• CSS Guide 2024

I am interested in writing content for educational purpose.

Most relevant ▼

• CSS Pakistan Affairs Special Exam 2023 Paper
• CSS Current Affairs Special Exam 2023 Paper
• CSS English (Precis & Composition) Special Exam 2023 Paper
• CSS Geology Paper 2023
• CSS Pure Mathematics Paper 2023
• CSS Physics Paper-II 2023
• CSS Chemistry Paper-II 2023
• CSS Applied Mathematics Paper 2023
• CSS Physics-I Paper 2023

Announcing the NeurIPS 2023 Paper Awards 

Communications Chairs 2023 2023 Conference awards , neurips2023

By Amir Globerson, Kate Saenko, Moritz Hardt, Sergey Levine and Comms Chair, Sahra Ghalebikesabi 

We are honored to announce the award-winning papers for NeurIPS 2023! This year’s prestigious awards consist of the Test of Time Award plus two Outstanding Paper Awards in each of these three categories: 

• Two Outstanding Main Track Papers 
• Two Outstanding Main Track Runner-Ups 
• Two Outstanding Datasets and Benchmark Track Papers  

This year’s organizers received a record number of paper submissions. Of the 13,300 submitted papers that were reviewed by 968 Area Chairs, 98 senior area chairs, and 396 Ethics reviewers 3,540  were accepted after 502 papers were flagged for ethics reviews . 

We thank the awards committee for the main track: Yoav Artzi, Chelsea Finn, Ludwig Schmidt, Ricardo Silva, Isabel Valera, and Mengdi Wang. For the Datasets and Benchmarks track, we thank Sergio Escalera, Isabelle Guyon, Neil Lawrence, Dina Machuve, Olga Russakovsky, Hugo Jair Escalante, Deepti Ghadiyaram, and Serena Yeung. Conflicts of interest were taken into account in the decision process.

Congratulations to all the authors! See Posters Sessions Tue-Thur in Great Hall & B1-B2 (level 1).

Outstanding Main Track Papers

Privacy Auditing with One (1) Training Run Authors: Thomas Steinke · Milad Nasr · Matthew Jagielski

Poster session 2: Tue 12 Dec 5:15 p.m. — 7:15 p.m. CST, #1523

Oral: Tue 12 Dec 3:40 p.m. — 4:40 p.m. CST, Room R06-R09 (level 2)

Abstract: We propose a scheme for auditing differentially private machine learning systems with a single training run. This exploits the parallelism of being able to add or remove multiple training examples independently. We analyze this using the connection between differential privacy and statistical generalization, which avoids the cost of group privacy. Our auditing scheme requires minimal assumptions about the algorithm and can be applied in the black-box or white-box setting. We demonstrate the effectiveness of our framework by applying it to DP-SGD, where we can achieve meaningful empirical privacy lower bounds by training only one model. In contrast, standard methods would require training hundreds of models.

Are Emergent Abilities of Large Language Models a Mirage? Authors: Rylan Schaeffer · Brando Miranda · Sanmi Koyejo

Poster session 6: Thu 14 Dec 5:00 p.m. — 7:00 p.m. CST, #1108

Oral: Thu 14 Dec 3:20 p.m. — 3:35 p.m. CST, Hall C2 (level 1) 

Abstract: Recent work claims that large language models display emergent abilities, abilities not present in smaller-scale models that are present in larger-scale models. What makes emergent abilities intriguing is two-fold: their sharpness, transitioning seemingly instantaneously from not present to present, and their unpredictability , appearing at seemingly unforeseeable model scales. Here, we present an alternative explanation for emergent abilities: that for a particular task and model family, when analyzing fixed model outputs, emergent abilities appear due to the researcher’s choice of metric rather than due to fundamental changes in model behavior with scale. Specifically, nonlinear or discontinuous metrics produce apparent emergent abilities, whereas linear or continuous metrics produce smooth, continuous, predictable changes in model performance. We present our alternative explanation in a simple mathematical model, then test it in three complementary ways: we (1) make, test and confirm three predictions on the effect of metric choice using the InstructGPT/GPT-3 family on tasks with claimed emergent abilities, (2) make, test and confirm two predictions about metric choices in a meta-analysis of emergent abilities on BIG-Bench; and (3) show how to choose metrics to produce never-before-seen seemingly emergent abilities in multiple vision tasks across diverse deep networks. Via all three analyses, we provide evidence that alleged emergent abilities evaporate with different metrics or with better statistics, and may not be a fundamental property of scaling AI models.

Outstanding Main Track Runner-Ups

Scaling Data-Constrained Language Models Authors : Niklas Muennighoff · Alexander Rush · Boaz Barak · Teven Le Scao · Nouamane Tazi · Aleksandra Piktus · Sampo Pyysalo · Thomas Wolf · Colin Raffel

Poster session 2: Tue 12 Dec 5:15 p.m. — 7:15 p.m. CST, #813

Oral: Tue 12 Dec 3:40 p.m. — 4:40 p.m. CST, Hall C2 (level 1)  

Abstract : The current trend of scaling language models involves increasing both parameter count and training dataset size. Extrapolating this trend suggests that training dataset size may soon be limited by the amount of text data available on the internet. Motivated by this limit, we investigate scaling language models in data-constrained regimes. Specifically, we run a large set of experiments varying the extent of data repetition and compute budget, ranging up to 900 billion training tokens and 9 billion parameter models. We find that with constrained data for a fixed compute budget, training with up to 4 epochs of repeated data yields negligible changes to loss compared to having unique data. However, with more repetition, the value of adding compute eventually decays to zero. We propose and empirically validate a scaling law for compute optimality that accounts for the decreasing value of repeated tokens and excess parameters. Finally, we experiment with approaches mitigating data scarcity, including augmenting the training dataset with code data or removing commonly used filters. Models and datasets from our 400 training runs are freely available at https://github.com/huggingface/datablations .

Direct Preference Optimization: Your Language Model is Secretly a Reward Model Authors: Rafael Rafailov · Archit Sharma · Eric Mitchell · Christopher D Manning · Stefano Ermon · Chelsea Finn

Poster session 6: Thu 14 Dec 5:00 p.m. — 7:00 p.m. CST, #625

Oral: Thu 14 Dec 3:50 p.m. — 4:05 p.m. CST, Ballroom A-C (level 2)  

Abstract: While large-scale unsupervised language models (LMs) learn broad world knowledge and some reasoning skills, achieving precise control of their behavior is difficult due to the completely unsupervised nature of their training. Existing methods for gaining such steerability collect human labels of the relative quality of model generations and fine-tune the unsupervised LM to align with these preferences, often with reinforcement learning from human feedback (RLHF). However, RLHF is a complex and often unstable procedure, first fitting a reward model that reflects the human preferences, and then fine-tuning the large unsupervised LM using reinforcement learning to maximize this estimated reward without drifting too far from the original model. In this paper, we leverage a mapping between reward functions and optimal policies to show that this constrained reward maximization problem can be optimized exactly with a single stage of policy training, essentially solving a classification problem on the human preference data. The resulting algorithm, which we call Direct Preference Optimization (DPO), is stable, performant, and computationally lightweight, eliminating the need for fitting a reward model, sampling from the LM during fine-tuning, or performing significant hyperparameter tuning. Our experiments show that DPO can fine-tune LMs to align with human preferences as well as or better than existing methods. Notably, fine-tuning with DPO exceeds RLHF’s ability to control sentiment of generations and improves response quality in summarization and single-turn dialogue while being substantially simpler to implement and train.

Outstanding Datasets and Benchmarks Papers

In the dataset category : 

ClimSim: A large multi-scale dataset for hybrid physics-ML climate emulation

Authors:  Sungduk Yu · Walter Hannah · Liran Peng · Jerry Lin · Mohamed Aziz Bhouri · Ritwik Gupta · Björn Lütjens · Justus C. Will · Gunnar Behrens · Julius Busecke · Nora Loose · Charles Stern · Tom Beucler · Bryce Harrop · Benjamin Hillman · Andrea Jenney · Savannah L. Ferretti · Nana Liu · Animashree Anandkumar · Noah Brenowitz · Veronika Eyring · Nicholas Geneva · Pierre Gentine · Stephan Mandt · Jaideep Pathak · Akshay Subramaniam · Carl Vondrick · Rose Yu · Laure Zanna · Tian Zheng · Ryan Abernathey · Fiaz Ahmed · David Bader · Pierre Baldi · Elizabeth Barnes · Christopher Bretherton · Peter Caldwell · Wayne Chuang · Yilun Han · YU HUANG · Fernando Iglesias-Suarez · Sanket Jantre · Karthik Kashinath · Marat Khairoutdinov · Thorsten Kurth · Nicholas Lutsko · Po-Lun Ma · Griffin Mooers · J. David Neelin · David Randall · Sara Shamekh · Mark Taylor · Nathan Urban · Janni Yuval · Guang Zhang · Mike Pritchard

Poster session 4: Wed 13 Dec 5:00 p.m. — 7:00 p.m. CST, #105 

Oral: Wed 13 Dec 3:45 p.m. — 4:00 p.m. CST, Ballroom A-C (level 2)

Abstract: Modern climate projections lack adequate spatial and temporal resolution due to computational constraints. A consequence is inaccurate and imprecise predictions of critical processes such as storms. Hybrid methods that combine physics with machine learning (ML) have introduced a new generation of higher fidelity climate simulators that can sidestep Moore’s Law by outsourcing compute-hungry, short, high-resolution simulations to ML emulators. However, this hybrid ML-physics simulation approach requires domain-specific treatment and has been inaccessible to ML experts because of lack of training data and relevant, easy-to-use workflows. We present ClimSim, the largest-ever dataset designed for hybrid ML-physics research. It comprises multi-scale climate simulations, developed by a consortium of climate scientists and ML researchers. It consists of 5.7 billion pairs of multivariate input and output vectors that isolate the influence of locally-nested, high-resolution, high-fidelity physics on a host climate simulator’s macro-scale physical state. The dataset is global in coverage, spans multiple years at high sampling frequency, and is designed such that resulting emulators are compatible with downstream coupling into operational climate simulators. We implement a range of deterministic and stochastic regression baselines to highlight the ML challenges and their scoring. The data (https://huggingface.co/datasets/LEAP/ClimSim_high-res) and code (https://leap-stc.github.io/ClimSim) are released openly to support the development of hybrid ML-physics and high-fidelity climate simulations for the benefit of science and society.   

In the benchmark category :

DecodingTrust: A Comprehensive Assessment of Trustworthiness in GPT Models

Authors: Boxin Wang · Weixin Chen · Hengzhi Pei · Chulin Xie · Mintong Kang · Chenhui Zhang · Chejian Xu · Zidi Xiong · Ritik Dutta · Rylan Schaeffer · Sang Truong · Simran Arora · Mantas Mazeika · Dan Hendrycks · Zinan Lin · Yu Cheng · Sanmi Koyejo · Dawn Song · Bo Li

Poster session 1: Tue 12 Dec 10:45 a.m. — 12:45 p.m. CST, #1618  

Oral: Tue 12 Dec 10:30 a.m. — 10:45 a.m. CST, Ballroom A-C (Level 2)

Abstract: Generative Pre-trained Transformer (GPT) models have exhibited exciting progress in capabilities, capturing the interest of practitioners and the public alike. Yet, while the literature on the trustworthiness of GPT models remains limited, practitioners have proposed employing capable GPT models for sensitive applications to healthcare and finance – where mistakes can be costly. To this end, this work proposes a comprehensive trustworthiness evaluation for large language models with a focus on GPT-4 and GPT-3.5, considering diverse perspectives – including toxicity, stereotype bias, adversarial robustness, out-of-distribution robustness, robustness on adversarial demonstrations, privacy, machine ethics, and fairness. Based on our evaluations, we discover previously unpublished vulnerabilities to trustworthiness threats. For instance, we find that GPT models can be easily misled to generate toxic and biased outputs and leak private information in both training data and conversation history. We also find that although GPT-4 is usually more trustworthy than GPT-3.5 on standard benchmarks, GPT-4 is more vulnerable given jailbreaking system or user prompts, potentially due to the reason that GPT-4 follows the (misleading) instructions more precisely. Our work illustrates a comprehensive trustworthiness evaluation of GPT models and sheds light on the trustworthiness gaps. Our benchmark is publicly available at https://decodingtrust.github.io/.

Test of Time

This year, following the usual practice, we chose a NeurIPS paper from 10 years ago to receive the Test of Time Award, and “ Distributed Representations of Words and Phrases and their Compositionality ” by Tomas Mikolov, Ilya Sutskever, Kai Chen, Greg Corrado, and Jeffrey Dean, won. 

Published at NeurIPS 2013 and cited over 40,000 times, the work introduced the seminal word embedding technique word2vec. Demonstrating the power of learning from large amounts of unstructured text, the work catalyzed progress that marked the beginning of a new era in natural language processing.

Greg Corrado and Jeffrey Dean will be giving a talk about this work and related research on Tuesday, 12 Dec at 3:05 – 3:25 pm CST in Hall F.  

Related Posts

2023 Conference

Announcing NeurIPS 2023 Invited Talks

Reflections on the neurips 2023 ethics review process, neurips newsletter – november 2023.

• Share full article

Advertisement

Supported by

Ramón Fonseca, Cofounder of Law Firm at Center of Panama Papers, Dies

Mr. Fonseca died while awaiting the verdict in his trial for money laundering tied to the 2016 scandal exposed by a massive leak of documents from his firm.

By Leila Miller

Ramón Fonseca, who co-founded the law firm at the heart of the Panama Papers leak, died Wednesday night, his lawyer confirmed, while awaiting the verdict in his money-laundering trial in Panama.

Mr. Fonseca, 71, died after complications from pneumonia, his daughter, Raquel Fonseca, told the Spanish news agency EFE .

Both Mr. Fonseca and Jürgen Mossack, who together founded the Mossack Fonseca firm, stood trial in Panama last month in relation to an explosive investigation published in 2016 by a coalition of news outlets that looked at 11.5 million confidential documents from the firm. The files, leaked by an anonymous source, identified international politicians , business leaders, criminals and celebrities involved in webs of suspicious financial transactions that concealed their wealth and avoided taxes.

During the trial, which began April 8 and lasted 10 days, prosecutors alleged that the firm had created shell companies with the purpose of hiding money that came from illicit activities. A total of 29 people — former employees of the now-shuttered firm and alleged conspirators — were accused of money laundering.

Since the beginning of the scandal, Mr. Fonseca and Mr. Mossack maintained their innocence. In an interview shortly after the Panama Papers exposé broke, Mr. Fonseca said that the firm had carefully vetted its clients but that it was similar to a car factory that “is not responsible for what is done with the car” after it is sold.

Mr. Fonseca studied at the London School of Economics and later worked for several years at the United Nations in Geneva. He told The New York Times that he had been “trying to save the world.”

In 1986, he and Mr. Mossack merged their small law firms into one that would be focused on secretive offshore banking. He also became a famous novelist, twice winning a prestigious Panamanian literary prize, and served as an adviser to President Juan Carlos Varela.

The Panama Papers investigation began with a message from an anonymous whistle-blower to Süddeutsche Zeitung, a German newspaper, asking if it was interested in data. The outlet decided to share the massive leak with the International Consortium of Investigative Journalists in Washington, D.C., which put together a team of hundreds of reporters from more than 100 news organizations around the world.

The leaked files covered nearly 215,000 offshore entities and more than 14,000 banks, law firms and middlemen that worked with Mossack Fonseca. The stories by the journalism partnership began rolling out in April 2016, leading the prime ministers of Iceland and Pakistan to step down.

But in Panama, some saw the firm’s owners as victims. The country’s bar association at the time came to its defense, saying that the leak was an attempt to attack the country’s reputation.

In 2017, Mossack and Fonseca were arrested in Panama on money-laundering charges relating to a scandal in Brazil known as Lava Jato, or Car Wash, a bribery scheme involving the state-controlled oil company Petrobras. They were released on bail from prison after several months. Their firm, which at one point had more than 600 employees, closed in 2018, insisting that it hadn’t broken the law.

In the Panama Papers trial, prosecutors alleged that the firm managed shell companies with the aim of moving off-the-books money from the German electronics company Siemens that was tied to illegal payments. They also accused the firm of being involved in illicit activity connected to Argentina.

It is unclear when the judge will hand down verdicts. She is also expected to issue a decision on a trial that took place last summer in the Lava Jato case that also implicated the firm.

Mr. Fonseca had been hospitalized throughout the Panama Papers trial. His daughter told EFE that the scandal had caused his health to deteriorate.

“All of this political persecution, all of the injustices greatly affected his physical health,” she said.